Rendering

기본적으로 Next.js는 모든 페이지를 사전 렌더링합니다. 이는 클라이언트 사이드 JavaScript가 아닌 Next.js가 각 페이지의 HTML을 생성하는 것을 의미합니다. 사전 렌더링은 성능과 SEO(검색 엔진 최적화)를 개선할 수 있습니다.

생성된 각 HTML에는 해당 페이지에 필요한 최소한의 JavaScript 코드만 포함됩니다. 페이지가 브라우저에서 로드되면, JavaScript 코드가 실행되어 그 페이지를 완전히 인터렉티브하게 만듭니다. (이 과정을 React에서는 하이드레이션 (opens in a new tab)이라고 부릅니다.)

Pre-rendering

Next.js는 정적 생성과 서버 사이드 렌더링이라는 두 가지 형태의 사전 렌더링을 지원합니다. 두 방식의 차이는 언제 페이지의 HTML이 생성되는가에 있습니다.

• 정적 생성: HTML이 빌드 시점에 생성되며, 이후 모든 요청에서 재사용됩니다.
• 서버 사이드 렌더링: HTML이 각 요청 시점에 생성됩니다.

중요한 점은, Next.js가 각 페이지별로 사용할 사전 렌더링 방식을 선택할 수 있게 해준다는 것입니다. 대부분의 페이지에는 정적 생성을 사용하고, 특정 페이지에서는 서버 사이드 렌더링을 사용함으로써 "하이브리드" Next.js 앱을 만들 수 있습니다.

성능상의 이유로 서버 사이드 렌더링보다는 정적 생성 방식을 사용하는 것을 권장합니다. 정적으로 생성된 페이지는 추가 설정 없이 CDN에 의해 캐시될 수 있어 성능이 향상됩니다. 그러나 경우에 따라 서버 사이드 렌더링이 유일한 선택일 수 있습니다.

또한, 정적 생성이나 서버 사이드 렌더링과 함께 클라이언트 사이드 데이터 페칭을 사용할 수도 있습니다. 이는 페이지의 일부가 클라이언트 JavaScript로 완전히 렌더링될 수도 있다는 것을 의미합니다. 자세한 내용은 데이터 페칭 문서를 참고하세요.