CSR vs SSR

📖 Redering : component를 가져와서 브라우저가 이해할 수 있는 HTML로 변환하는 작업

React가 application을 렌더하는 방법(CSR)

CRA로 React만을 이용해서 application을 생성하면 client side apllication이 된다 → client가 사용자 브라우저에서 모든 UI를 구축함한다

• 단점

  • 소스코드를 보면 실제 소스코드는 비어있다(UI가 없음)
    

    • 인스펙트에서는 볼 수 있다
      이는 Javascript에 의해서 UI가 추가되었기 때문이다
    • 화면을 새로고침 하다보면 화면에 아무것도 안그려져있는 때가 있는데 이 때가 Javascript가 UI를 그리고 있는 시점이다
    • Javascript가 disabled 되어 있는 상황이거나, 엘베에서 데이터가 안터지는 상황등이라면 내가 생각한것보다 더 오랫동안 빈 화면을 유저가 봐야한다

  • SEO 검색 엔진 최적화 문제

    • google등에서 내 페이지가 검색되길 바란다면 google에서 빈 페이지를 보여주지 않는 것이 좋다
      → google은 페이지의 HTML을 보고 검색해주기 때문(가끔 Javascript를 실행하기도 하지만.. 안전하게 HTML을 그려주는게 좋음)

👉🏻 client는 Javascript를 로드하고 → 그 후에 Javascript가 UI를 빌드한다

---

Next.js가 application을 렌더하는 방법(SSR)

자동적으로 server side render를 한다

• server, 즉 BE에서 application을 render
• Next.js는 서버에서 나의 모든 컴포넌트(server component건 client component(”use client”)건 상관 없음) 를 렌더 후 그 HTML을 가지고 브라우저의 request에 대한 response로 준다 → 그래서 소스코드가 안비어 있음
• use client를 선언한 client component에서 console.log(path)를 실행시키면
  
  이렇게 브라우저에도 찍히고
  
  이렇게 backend server쪽 콘솔에도 찍힌다..!
  
• 그리고 소스코드에서도 페이지의 내용들이 들어있음을 확인할 수 있다 → 화면에 그려질 HTML을 가지고 있기 때문
  

결론

모든 컴포넌트와 페이지들은 백엔드에서 먼저 렌더된다

그리고 이것들이 HTML로 변환하고

이 HTML을 브라우저로 보내준다