[Next.js] 렌더링 방식

알아야 할 개념

SSR(Server-Side-Rendering)

- 완성된 html이 서버에서 만들어진 뒤 브라우저에 내려줌

- 빌드타임에 웹사이트 전체를 미리 만들어 놓는 것이 아니라, 클라이언트로부터 요청이 들어올 때마다 실시간으로 웹페이지를 만들어낸다는 것이 SSG와의 가장 큰 차이점 

장점

- 초기 용량이 작고 보안에 유리

- 페이지가 라우팅 될 때 깜빡임이 있음

단점

- 사용자가 많을 때 서버 부하의 위험

---

CSR

• cra로 만든 react앱이 랜더링 하는 방식
• 초기에 작은 html을 받고, 나머지는 동적으로 그림
  • 처음에는 빈 html을 가짐 (root를 id로 가지는 div만 존재) 
  • 나머지 dom은 js를 다운로드하여 그림 

장점

- 화면 깜빡임이 없음 

단점

- 초기 용량이 큼

- 서버와 통신해야 하기 때문에 보안에 취약

- SSR에 비해 SEO(검색엔진 최적화)에 제약이 있음

 

---

SSG(Static-Site-Generation)

- pre-rendering : static한 html을 build time에 미리 만들어 둠 

- 내용이 변하지 않는 정적인 사이트에 사용 

 

장점

- 미리 정적인 html을 만들어 두므로 서버에 부하가 없음 

- html 자체를 캐시 가능

- 완성된 html이므로 SEO에 좋음 

 

---

Next.js의 렌더링

- SSR, CSR, SSG의 장점을 고려하여 페이지를 자유롭게 routing/rendroing 할 수 있도록 API를 제공

• SSG/SSG의 용량과 보안
• CSR의 페이지 이동 속도, 깜빡임 없음

 

next.js의 렌더링은 ssg와 같이 pre-rendering 방식이므로 html을 build time에 미리 만들어둔다.

그러면 이때 값이 변경되는 상황이면 어떻게 될까?

이미 html을 다 만들어 두었지만 그렇다고 사이트 전체를 다시 배포하기에는 힘든 상황이다.

이럴 때 next.js에서는 revalidate라는 속성을 지원한다.

 

revalidate

ISR(Incremental Static Regeneration) 방식을 지원하기 위해 만든 속성

이미 빌드가 완료된 사이트에서 주기적으로 정적인 페이지를 업데이트 할 수 있게 해준다.

-> 해당 페이지만 업데이트 하는 것이므로 전체를 다시 빌드할 필요가 없다.

 

revalidate 시간을 설정해 두면 해당 시간이 지날 때 마다 값을 확인해서 바뀐 경우 페이지를 새롭게 업데이트 한다. 

 

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration

Data Fetching: Incremental Static Regeneration | Next.js