2.3 SSR vs CSR

• rendering : react code를 브라우저가 이해할 수 있는 html로 바꾸는 것
• create-react-app을 사용해 react만으로 application을 생성하면 => client side application

CSR (client side application)

• react는 사용자 브라우저인 client 에서 모든 rendering 작업을 수행해야 함
• client가 사용자 브라우저에 UI를 구축해야 함
  단점
  - javascript가 완벽히 다운로드 될때까지 기다려야함. 그 전까지는 빈페이지
  - SEO 검색 엔진 최적화 : google 검색엔진에 노출되고자 한다면, 사용하지 않는 것이 좋다. google은 페이지의 html을 보기 때문(검색엔진이 보는 내 페이지가 빈페이지 일 수 있다.)
  

요약

cilent side rendering은 모든 rendering 즉, 모든 UI 구축 작업이 모두 client측에서 일어난다.
client가 Javascript 로드 > Javascript가 UI 빌드

SSR (server side rendering)

• Next.js 사용시 default로 SSR이 됨.
• 브라우저가 Javascript 로드가 완료 될때까지 기다릴 필요가 없다. 왜냐하면 이미 화면에 표시할 html을 갖고 있기 때문이다. 즉, javascript가 활성화되지 않아도 사용자가 html을 볼 수 있다.
• Next.js application의 모든 page안의 모든 component들은 Next.js가 그것들을 우선 server에서 render한다.
  • Next.js는 server, 즉 backend에서 application을 render한다.
  • Next.js는 모든 컴포넌트를 render해서 그 html을 가지고 브라우저 request에 대한 response로 준다.
• 사용자가 처음에 페이지에 도착했을 때, UI를 빌드하는 데 javascript가 필요하지 않다. UI는 이미 빌드되어있고, HTML도 이미 존재한다. => 브라우저가 즉시 화면에 표시할 수 있다.