Next.js에는 두 가지 사전 렌더링 형태(형식)가 있습니다.
- 정적 생성 (Static Generation = SSG)
- 서버 측 렌더링 (Server-Side Rendering = SSR)
둘의 차이점은 폐이지에 대한 HTML을 생성할 때 나타납니다.
정적 생성 (SSG)
빌드 시 HTML을 생성하는 사전 렌더링 방식입니다.
사전 렌더링된 HTML은 각 요청에서 재사용됩니다.
서버 측 렌더링 (SSR)
각 요청에 대해 HTML을 생성하는 사전 렌더링 방식입니다
❗개발 모드(npm run dev 또는 yarn dev)에서
모든 페이지는 정적 생성을 사용하는 페이지의 경우에도 각 요청에서 미리 렌더링(서버 측 렌더링) 됩니다.
(정적 생성을 확인할 때는 빌드 후 확인할 수 있습니다. 개발자 모드에서는 확인이 불가합니다.)
페이지당 기준
중요하게도 Next.js를 사용하면 각 페이지에 사용할 사전 렌더링 양식을 선택할 수 있습니다.
대부분의 페이지에는 정적 생성을 사용하고, 다른 페이지에는 서버 측 렌더링을 사용하여
하이브리드 Next.js 앱을 만들 수 있습니다.
정적 생성과 서버 측 렌더링을 사용하는 경우
페이지를 한번 만들고 CDN에서 제공 할 수 있기 때문에 모든 요청에 대해 서버가 페이지를 렌더링(SSR) 하도록 하는 것보다
정적 생성(SSG)을 사용하는 것이 훨씬 빠르기 때문에 두 방식을 적절히 혼합하여 사용하면 좋습니다.
다음 경우에 정적 생성(SSG)을 사용하는 경우입니다.
(데이터 변화가 많지 않은 페이지의 경우 정적 생성을 사용하면 좋습니다.)
- 마케팅 페이지
- 블로그 게시물
- 전자상거래 제품 목록
- 도움말 및 문서
사용자의 요청에 앞서 이 페이지를 미리 렌더링 할 수 있을까?라는 질문에 "예"라는 답이 돌아온다면
정적 생성을 선택 하는 것이 좋습니다.
반면에 Static Generation(정적 생성)은
사용자의 요청에 앞서 페이지를 미리 렌더링 할 수 없는 경우 좋은 생각은 아닙니다.
페이지에 자주 업데이트가 일어나는 데이터가 표시되고 모든 요청에 따라 페이지 콘텐츠가 변경되어야 하는 경우
서버 측 렌더링(SSR)을 사용하는 것이 좋습니다.
속도는 느려지지만 미리 렌더링된 페이지는 항상 최신 상태로 유지됩니다.
(데이터가 자주 업데이트 되더라도 즉시 업데이트된 데이터로 반영되어 사용자에게 보입니다.)
또는 사전 렌더링을 건너뛰고 클라이언트 측 JavaScript를 사용하여 자주 업데이트되는 데이터를 채울 수도 있습니다.
정적 생성과 서버 측 렌더링에 대한 자세한 개념과 예제는 이전 포스팅 참고!
'프레임워크 > Next.js' 카테고리의 다른 글
[Next.js] 블로그 데이터 (0) | 2022.02.18 |
---|---|
[Next.js] 데이터가 있거나 없는 정적 생성(SSG) (0) | 2022.02.18 |
[Next.js] 사전 렌더링 (0) | 2022.02.18 |
[Next.js] Assets(자산), Meta Data 및 CSS (0) | 2022.02.17 |
[Next.js] 전역 CSS (0) | 2022.02.17 |
댓글