[NextJS] 서버사이드 렌더링(SSR)

Static Pre Rendering

• 클라이언트 사이드 렌더링 CSR : React
  화면에 보이는 모든 UI를 클라이언트의 브라우저에서 만든다.
  html을 불러오면 그 후에 자바스크립트와 리액트 코드를 가져온다.
  즉 html만 불러왔을때는 화면에 아무것도 렌더링되지않고 흰화면이 뜬다.

개발자도구>네트워크에 들어가면 네트워크 속도를 의도적으로 느리게 설정할 수 있다.

• 서버 사이드 렌더링 SSR : Next
  우리가 만든 프로젝트의 페이지 소스코드를 보면 js파일로 작성한 내용이 html에 들어있는 것을 알 수 있다.

<div>page.js</div>

즉 연결속도가 느리거나 사용자 브라우저의 js가 비활성화되어있어도 초기에 적어도 사용자는 흰 화면이 아니라 정적인 것들을 다 볼수있게된다.

• hydration: react.js를 프론트엔드 안에서 실행하는 것
• next.js는 react.js를 백엔드에서 동작시켜서 페이지를 미리 만든다.
• 렌더링이 끝나면 HTML이 된다. next.js는 그 HTML을 페이지의 소스코드에 넣는다.

SEO에 좋기때문에 구글과 같은 검색엔진과 사용자들에게 큰 장점이다.