[공식문서] NextJS - Pre-rendering and Data Fetching #4

두 가지 형태의 사전 렌더링

Next.js에는 두 가지 형태의 사전 렌더링이 있습니다. 정적 생성(Static Generation)과 서버 사이드 렌더링(Server-side Rendering)입니다. 차이는 페이지의 HTML을 언제 생성하는지에 있습니다.

 

• 정적 생성(Static Generation)은 빌드 시점에 HTML을 생성하는 사전 렌더링 방식입니다. 이 사전 렌더링된 HTML은 각 요청마다 재사용됩니다.
• 서버 사이드 렌더링(Server-side Rendering)은 각 요청마다 HTML을 생성하는 사전 렌더링 방식입니다.

Next.js 공식문서 - 정적 생성

Next.js 공식문서 - 서버 사이드 렌더링

 

개발 모드에서(npm run dev 또는 yarn dev를 실행할 때)는 모든 요청마다 페이지가 사전 렌더링됩니다. 이것은 정적 생성에도 적용되어 개발을 더 쉽게 할 수 있게 해줍니다. 프로덕션으로 이동할 때는 정적 생성이 한 번만 빌드 시점에 발생하며 모든 요청마다 발생하지 않습니다.

 

페이지별 설정

중요한 점은 Next.js가 각 페이지에 어떤 사전 렌더링 방식을 사용할지 선택할 수 있다는 것입니다. 정적 생성을 대부분의 페이지에 사용하고 일부 페이지에 서버 사이드 렌더링을 사용하여 "하이브리드" Next.js 앱을 만들 수 있습니다.

Next.js 공식문서 - 페이지별 렌더링 방식 설정

 

정적 생성 vs 서버 사이드 렌더링을 언제 사용할지

가능하면 정적 생성(데이터 포함 및 미포함)을 사용하는 것이 좋습니다. 왜냐하면 페이지가 한 번 빌드되어 CDN에서 제공되므로 서버가 매 요청마다 페이지를 렌더링하는 것보다 훨씬 빠릅니다.

 

많은 유형의 페이지에 정적 생성을 사용할 수 있습니다:

• 마케팅 페이지
• 블로그 글
• 전자 상거래 제품 목록
• 도움말 및 문서

스스로에게 물어보세요: "이 페이지를 사용자 요청 앞에 사전 렌더링할 수 있을까요?"라는 질문에 대답이 "예"이면 정적 생성을 선택해야 합니다.

 

반면에, 사용자 요청 앞에서 페이지를 사전 렌더링할 수 없는 경우에는 정적 생성을 사용하는 것이 좋지 않습니다. 아마도 페이지에 자주 업데이트되는 데이터가 표시되며 페이지 콘텐츠가 매 요청마다 변경됩니다.

 

이 경우에는 서버 사이드 렌더링을 사용할 수 있습니다. 속도는 느릴 수 있지만 사전 렌더링된 페이지는 항상 최신 상태가 될 것입니다. 또는 사전 렌더링을 건너뛰고 사용자 요청마다 자주 업데이트되는 데이터를 채우기 위해 클라이언트 측 JavaScript를 사용할 수 있습니다.

 

정적 생성에 중점을 둘 것입니다.

이 레슨에서는 정적 생성에 중점을 둘 것입니다.

다음 페이지에서는 데이터를 포함하거나 포함하지 않는 정적 생성에 대해 이야기하겠습니다.