Next.js 기본 사용법(3) - 사전 렌더링

이번 포스트에서는 Next.js의 가장 중요한 개념 중 하나인 사전 렌더링에 대해 알아본다.

 

1. 개념

기본적으로 Next.js는 모든 페이지를 미리 렌더링한다.

즉, Next.js는 클라이언트 측 Javascript로 모든 작업을 수행하는 대신 페이지에 대해 미리 HTML을 생성한다.

생성된 HTML은 해당 페이지에 필요한 최소한의 Javascript 코드와 연결되고, 브라우저에서 페이지를 로드하면 해당 Javascript 코드가 실행되어 페이지를 완전히 실행한다. 이를 Hydration 이라고 말한다.

 

Pre-rendering

사전 렌더링은 처음 Initial Load에 사전 렌더링된 HTML이 보여진다.

이 후, Hydration에서 컴포넌트가 초기화되고 상호작용이 필요한 컴포넌트가 Javascript 로드 후에 실행된다.

 

No Pre-rendering

사전 렌더링이 없는 경우, initial load에서 아무것도 렌더링 되지 않아 빈 화면이 표현된다.

이 후, Javascript가 로드된 후에, 상호작용이 가능한 기능들과 함께 화면이 채워진다.

 

결국, 사전렌더링이 가능한 Next.js는 React.js 보다 SEO에 유리하며, 어플리케이션이 Javascript가 없이도 작동하고 화면이 렌더링 되게끔 해준다.

 

2. 종류

Next.js에는 사전 렌더링 형식으로 정적 생성과 서버 사이드 렌더링 두가지가 있다.

• Static Generation(정적 생성) : 빌드 시 HTML을 생성하는 사전 렌더링 방법. 사전 렌더링 된 HTML은 각 요청에서 재사용된다.
• Server-side Rendering(서버 사이드 렌더링) : 각 요청에 대해 HTML을 생성하는 방법

Static Generation

Server-side rendering

 

대부분의 페이지에서 Static Generation을 권장하는데, 매 요청마다 서버에서 페이지를 렌더링하는 것보다 빠르기 때문이다. 주로, 마케팅 페이지, 블로그 등과 같이 하나의 페이지가 여러 요청에 동일하게 사용될 때 이용된다.

다만, 매 요청에 따라 다른 데이터를 보여주려면 Server-side Rendering을 사용한다.