[Next.js] CSR(client side render) vs SSR(server side render)

* Rendering : js code를 브라우저가 이해할 수 있는 html로 바꾸는 것

 

- React render :  CSR (client side rendering)

• create-react-app 을 사용해 react만으로 application을 생성하면 , client side rendering
• client side rendering => 사용자 브라우저인 client단에서 rendering 작업을 한다.
• 단점 
  1. 페이지의 실제 소스코드는 비어있다.
     • ex. <div id='root'></div>
     • = UI가 없다
     • 브라우저가 모든 JS 파일을 다운로드하고, 실행한 후에야 화면에 보여지는 것
     • 새로고침 시, JS엔진이 위의 사항을 처리하는 시간 동안 빈 화면이 보여짐
  2. SEO, 검색 엔진 최적화
     • Search Engine Optimization
     • Google은 페이지의 HTML을 본다 -> 구글에 노출을 위해선, 빈페이지를 보여주지 않는 것이 좋다.
     • 검색엔진은 JS를 실행하여 그 안에 코드를 보지 않는다.

 

- Next.js render :  SSR (server side rendering)

• next.js로 웹사이트를 빌드하면 자동으로,  server side rendering
• HTML을 보여주는데 JavaSript가 필요하지 않다
• next.js application의 모든 page 안의 모든 component 들은, next.js가 우선 server(backend)에서 render한다.
  • -> 모든 component를 render한 html을 브라우저 request에 대한 response로 줌
  • 브라우저에서 사용자는 잠깐이라도(새로고침) 비어있는 html을 보지 않음
  • server component, client component 전부 backend에서 render