[Next.js] Next.js에서의 Rendering

해당 게시물은 Next.js 공식문서를 토대로 학습한 내용을 정리한 것입니다.

Pre-Rendering

• 기본적으로 Next.js는 모든 페이지를 사전에 렌더링하기 때문에, 클라이언트 측에서 빈 HTML을 받아 JS를 이용해 이후 작업을 수행하는 대신 각 페이지에 대하여 미리 HTML을 생성한다.
• 사전 렌더링을 통해 내용이 채워져있는 HTML을 브라우저가 받으면 더 나은 성능과 더불어 클라이언트 사이드 렌더링에서 아쉬웠던 SEO를 제공할 수 있다는 장점이 있다.
• 미리 렌더링된 HTML은 해당 페이지에 필요한 JS 코드와 연결되어 브라우저에서 페이지를 로드하면, 연결된 JS 코드가 실행되고, 사용자와의 인터렉션이 가능한 페이지가 만들어진다.
  (출처) Next.js 공식문서 - Pre-rendering
• React로만 만들어진 애플리케이션의 경우에는 사전 렌더링을 하지 않기 때문에, JS가 실행된 후에야 비로소 UI를 화면에서 볼 수 있게 된다.
  (출처) Next.js 공식문서 - Pre-rendering

Pre-Rendering의 종류

1. Static Generation (정적 생성) : 빌드 시 HTML을 생성하는 방식이다.
   (출처) Next.js 공식문서 - Two Forms of Pre-rendering

• dev 환경인 경우 페이지들은 모든 요청에 대해 사정 렌더링된다. 정적 생성에서도 동일하게 개발을 쉽게 하기 위해 적용된다. production 환경으로 이동하게 되면, 정적 생성은 dev 환경에서처럼 모든 요청에 대해 사전 렌더링 하지 않고 빌드 시 한번만 하게 된다.

2. Server Side Rendering (서버 사이드 렌더링) : 사용자의 각 요청에 대해 HTML을 생성하는 방식이다.
   (출처) Next.js 공식문서 - Two Forms of Pre-rendering

💡 두 방식을 언제 써야 할까?

• Next.js는 위와 같은 두 종류의 렌더링 방식을 각각의 페이지의 특징에 맞게 선택해 도입할 수 있다. 두 가지를 혼합해 렌더링 함으로써 하이브리드 애플리케이션을 만들 수 있다.
  • 정적 생성은 페이지를 한번 만들고나면 CDN에서 제공해주기 때문에, 모든 요청에 대해서 서버가 페이지를 렌더링하도록 하는 것보다 빠른 속도를 낼 수 있어 서버 사이드 렌더링을 써야하는 경우가 아니라면 대부분은 정적 생성을 이용해 구현하는 것이 좋다.
  • 즉, 사용자의 요청이 있기 전, 페이지를 사전에 렌더링할 수 있는 페이지라고 생각된다면 정적 생성으로 구현하는 것이 바람직하다.
• 반면에, 사용자의 요청이 있기 전에 페이지를 사전 렌더링 할 수 없는 경우가 있다. 페이지에 자주 업데이트되는 데이터가 있어 요청에 따라 페이지의 내용이 달라진다면, 정적 생성 보다는 서버 사이드 렌더링을 사용하는 것이 좋다.
  • 속도는 정적 생성에 비해서 조금 느려질 수는 있지만, 페이지를 최신 상태로 유지하고 싶다면 서버 사이드 렌더링 방식이 적합하다.