ppr (Partial Prerendering, 부분 사전 렌더링)

Partial Prerendering, 줄여서 PPR은 같은 경로(Route) 안에서 정적 컴포넌트와 동적 컴포넌트를 함께 사용할 수 있게 해주는 기능이에요. 쉽게 말해, 웹 페이지 내에서 변하지 않는 부분은 미리 만들어두고, 변하는 부분은 계속 업데이트할 수 있다는 거죠. 이 덕분에 사용자 경험이 더 좋아지고, 성능도 한층 더 최적화됩니다.

자세한 내용은 PPR 공식 문서를 참고해보세요!

Partial Prerendering 사용법

점진적 도입 (버전 15 부터)

Next.js 같은 프레임워크에서 PPR을 점진적으로 도입할 수 있는데요, 예를 들어 조금씩 기존 코드에 PPR을 도입하면서 전체 애플리케이션에 적용하는 방식을 말합니다.
이렇게 하면 기존 서비스에 큰 무리 없이 성능 개선을 시도할 수 있죠.

제가 덧붙이고 싶은 팁!

PPR을 활용할 때는 동적 부분과 정적 부분을 명확히 구분하는 게 중요해요.
예를 들어, 사용자 프로필처럼 자주 변경되는 데이터는 동적으로, 홈페이지 배너 같이 변하지 않는 요소는 정적으로 처리하는 식이죠.
SEO(Search Engine Optimization)에도 도움이 되니, 검색엔진이 페이지 내용을 잘 읽게 하고 싶으면 PPR을 적극 활용해 보세요.
PPR을 제대로 이해하면, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)의 장점을 모두 취할 수 있습니다!

다음 번에는 실제 사용하는 예제 코드와 함께 더 쉽게 설명해 드릴게요. 궁금한 점 있으면 언제든지 댓글 남겨주세요~

Next.js 15에서는 Partial Prerendering(PPR)을 점진적으로 도입할 수 있어요. 이걸 적용하려면 먼저 next.config.js 파일에서 ppr 옵션을 'incremental'로 설정해줘야 합니다. 그리고 각 레이아웃이나 페이지 파일 최상단에 experimental_ppr 옵션을 export해서 해당 라우트에서 PPR을 사용하도록 명시해줘야 해요.

예를 들어, next.config.js는 이렇게 설정할 수 있죠:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}

export default nextConfig

그리고 페이지 파일에서는 이렇게요:

import { Suspense } from "react"
import { StaticComponent, DynamicComponent, Fallback } from "@/app/ui"

export const experimental_ppr = true

export default function Page() {
  return (
     <>
      <StaticComponent />
      <Suspense fallback={<Fallback />}>
        <DynamicComponent />
      </Suspense>
     </>
  );
}

여기서 잠깐! 알아두면 좋은 점들

내용	설명
기본값	`experimental_ppr` 옵션을 설정하지 않은 라우트는 기본값이 `false`로 PPR이 적용되지 않아요. 따라서 각 라우트마다 명시적으로 활성화해줘야 합니다.
적용 범위	`experimental_ppr`을 활성화하면 해당 라우트 세그먼트의 모든 하위 레이아웃과 페이지에도 적용돼요. 그래서 꼭 모든 파일에 넣지 않고 최상위 라우트 파일에만 넣으면 됩니다.
비활성화	하위 세그먼트에서 PPR을 끄고 싶다면 그 세그먼트 파일에서 `experimental_ppr = false`를 설정하면 됩니다.

Partial Prerendering(PPR)이 왜 좋냐면?

기존에는 전체 페이지를 SSR(서버사이드 렌더링)하거나 SSG(정적 생성)으로 렌더링해야 했는데, Next.js 15부터는 정적 컴포넌트와 동적 컴포넌트를 섞어서 레이아웃이나 페이지 단위로 점진적 프리렌더링을 할 수 있어서 성능과 사용자 경험을 모두 챙길 수 있어요.

이에 따라, 특정 컴포넌트는 빌드시 미리 렌더링하고, 나머지는 클라이언트 사이드에서 비동기로 렌더링할 수 있습니다. 덕분에 초기 로딩 속도 향상과 동시에 최신 데이터도 빠르게 가져올 수 있는 장점이 있습니다.

참고로, React의 Suspense와 함께 사용하는 것이 핵심입니다. Suspense는 비동기 컴포넌트 로딩이나 데이터 페칭 시 로딩 상태를 우아하게 보여주기 때문에 PPR과 아주 잘 어울려요.

여러분도 Next.js 15의 Partial Prerendering 기능을 적극 활용해서, 유연하고 빠른 웹사이트 만들어보세요! 급할 때는 조금 복잡해 보일 수 있는데, 천천히 한 단계씩 익히면 앞으로 개발 흐름이 훨씬 자유로워질 거예요.

Version	Changes
`v15.0.0`	experimental `incremental` value introduced
`v14.0.0`	experimental `ppr` introduced