next ppr

ppr이란?

Partial Prerendering(부분 사전렌더링)이란 뜻으로, 빌드 타임에 미리 렌더링할 부분을 파일 단위로 지정할 수 있는 기능을 말한다.

SSG vs PPR

nextjs page router를 사용한 사람이라면 SSG를 알 것이고, 이것이 중요하다는 것도 알 것이다. SSG는 Static Site Rendering의 약자로 정적 사이트 생성을 뜻하는데, page router에서는 getStaticProps를 사용하여 정적 사이트를 만들었을 것이다. 하지만 page router에서는 페이지 단위로 제어할 수 있다는 한계 때문에 SSG를 적용할 페이지가 마땅히 없었다. (랜딩페이지 말고는 사용처를 찾기 쉽지 않다.)

하지만, PPR은 다르다. ppr은 앞으로 웹 애플리케이션의 기본 렌더링 모델이 될거라고 next가 생각하는 만큼 핵심적인 기술이다.

ppr은 정적 사이트와 동적 렌더링의 장점을 결합한 기술로, 한 페이지에서 정적일 필요가 있는 부분(컴포넌트)은 사전렌더링하고, 동적인 부분은 유저의 요청이 들어올 때 렌더링하도록 분리할 수 있는 기술이다.

next ppr 사용법

// next.config.mjs
/** @type {import('next').NextConfig} */
 
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};
 
export default nextConfig;

next config 파일에 다음과 같이 ppr이라는 실험적 기능을 추가한다.

import SideNav from '@/app/ui/dashboard/sidenav';
 
export const experimental_ppr = true;

사용하고 싶은 파일에 experitental_ppr = true를 사용하면 next에서 알아서 PPR해준다.