[Docs] 두 가지 형태의 프리렌더링

Next.js에는 두 가지 형태의 프리렌더링이 있다.

 

정적 생성(Static Generation) 과 서버 사이드 렌더링(Server-side Rendering).

 

이 두 형태의 차이점은 페이지의 HTML을 생성하는 시점이다.

 

 

정적 생성이란?

빌드 시점에 HTML을 생성하는 프리렌더링 방식이다. 그리고 프리 렌더링된 HTML은 각 요청에 재사용된다.

 

서버 사이드 렌더링

각 요청마다 HTML을 생성하는 프리렌더링 방법이다.

 

개발 모드에서는 모든 요청에 대해 페이지가 프리 렌더링된다. 이는 정적 생성 시에도 적용되어 개발이 더 쉬워진다. 프로덕션 모드로 전환하면 정적 생성은 원래대로 빌드 시 한 번만 수행된다.

 

 

페이지 마다 다르게?

Next.js를 사용하면 각 페이지에 사용할 프리렌더링 형태를 선택할 수 있다.

대부분의 페이지에 정적 생성을 사용하고, 몇몇에만 서버 사이드 렌더링을 사용하는 "하이브리드" 앱도 만들 수 있다.

 

 

 

정적 생성을 사용하는 경우와 서버 사이드 렌더링을 사용하는 경우

가능하면 데이터 포함 유무와 관계없이 정적 생성을 사용하는 것이 좋다.

이유는 페이지를 한 번 빌드해두면 CDN에서 제공해줄 수 있기 때문이다.

속도면에서도 요청마다 서버가 페이지를 렌더링하는 것보다 훨씬 빠르다.

 

마케팅, 블로그 게시물, 전자상거래 제품 목록, 도움말 및 문서 같은 유형에는 정적 생성을 사용할 수 있다:

 

스스로에게 물어보자.

 

"사용자의 요청에 앞서 이 페이지를 프리 렌더링해도 되는가?"

 

대답이 '예'라면 정적 생성을 선택해야 한다. "아니오" 라면 정적 생성을 선택하지 않는 것이 좋다.

 

페이지에 자주 업데이트되는 데이터가 표시되고 요청할 때마다 페이지 콘텐츠가 변경되는 경우가 있다.

이 경우 서버 사이드 렌더링을 사용하면 된다. 속도는 느리지만 프리 렌더링된 페이지는 항상 최신 상태로 유지된다.

또는 프리렌더링을 건너뛰고 클라이언트 사이드에서 자바스크립트를 사용해 자주 업데이트되는 데이터를 채울 수도 있다.

 

 

Quick Review: When would you use Server-side rendering?

A. When you have thousands of pages

B. When the data needs to be up-to-date with every request

C. When you are building a page specific to a user