Next.js 15 부분 사전 렌더링(PPR): 이커머스를 위한 완벽 가이드

경쟁이 치열한 이커머스 세계에서는 단 1밀리초의 차이가 승패를 가릅니다. 아마존(Amazon)의 연구에 따르면 지연 시간이 100ms 늘어날 때마다 매출이 1% 감소한다고 합니다. 수년 동안 개발자들은 정적 사이트 생성(SSG)의 속도와 SEO 이점을 택할 것인지, 아니면 서버 사이드 렌더링(SSR)의 개인화와 실시간 데이터를 택할 것인지라는 근본적인 난제에 직면해 왔습니다.

Next.js 15는 이러한 딜레마를 해결하기 위한 혁신적인 솔루션인 **부분 사전 렌더링(Partial Prerendering, PPR)**을 도입했습니다. 이 기능을 사용하면 동일한 경로에서 정적 렌더링과 동적 렌더링을 결합하여, 전통적인 하이브리드 방식의 복잡성 없이 두 방식의 장점만을 취할 수 있습니다.

본 가이드에서는 PPR의 작동 원리, 이커머스 환경에서의 중요성, 그리고 현재 Next.js 15 프로젝트에 이를 적용하는 방법에 대해 심도 있게 다룹니다.

부분 사전 렌더링(PPR)이란 무엇입니까?

부분 사전 렌더링은 빌드 시점(또는 재검증 시점)에 경로의 일부를 사전 렌더링하고, 요청 시점에 채워질 동적 콘텐츠를 위한 "구멍(holes)"을 남겨두는 최적화 기법입니다.

이커머스의 제품 상세 페이지를 떠올려 보십시오. 제품명, 설명, 이미지와 같은 대부분의 콘텐츠는 정적이며 모든 사용자에게 동일합니다. 하지만 재고 상태, 개인화된 가격, 장바구니 내용은 매우 동적입니다.

기존에는 다음과 같은 방식 중 하나를 선택해야 했습니다:

1. 전체 페이지 SSR: 모든 사용자의 첫 바이트까지의 시간(TTFB)이 느려집니다.
2. SSG 후 클라이언트에서 데이터 페칭: 레이아웃 시프트(CLS)가 발생하고 "로딩 상태"가 노출되어 전환율에 악영향을 줄 수 있습니다.

PPR은 정적 "쉘(shell)"을 즉시 전송하고, 동적 프래그먼트가 준비되는 대로 스트리밍함으로써 이 방식을 혁신적으로 바꿉니다.

PPR 작동 원리: 정적 쉘과 동적 구멍

PPR의 핵심은 React Suspense와의 통합에 있습니다. PPR을 활성화하면 Next.js는 컴포넌트 트리를 분석합니다.

1. 정적 쉘 (Static Shell)

cookies(), headers() 또는 캐시되지 않은 데이터 페칭과 같은 동적 함수를 사용하지 않는 페이지의 모든 부분은 정적인 HTML 쉘로 사전 렌더링됩니다. 이 쉘에는 내비게이션, 레이아웃 및 페이지 콘텐츠의 정적인 부분이 포함됩니다. 사용자가 페이지를 요청하면 이 쉘이 에지(Edge)에서 즉시 제공됩니다.

2. 동적 구멍 (Dynamic Holes)

동적 로직을 포함하고 <Suspense />로 감싸진 부분은 "구멍"으로 취급됩니다. 정적 쉘이 브라우저로 전송되는 동안 서버는 동적 컴포넌트를 계속 실행합니다. 동적 데이터가 페칭되고 컴포넌트 렌더링이 완료되면, 결과 HTML이 브라우저로 스트리밍되어 올바른 위치에 삽입됩니다.

결과

사용자는 페이지 레이아웃과 주요 콘텐츠를 거의 즉시 보게 됩니다. "장바구니 담긴 항목"이나 "추천 상품"과 같은 동적 부분은 잠시 후 나타나며, 이때 전체 페이지의 레이아웃 시프트는 발생하지 않습니다.

이커머스에서 PPR이 혁신적인 이유

1. 탁월한 코어 웹 바이탈 (Core Web Vitals)

CDN 에지에서 정적 쉘을 제공함으로써 **TTFB(첫 바이트까지의 시간)**와 **FCP(첫 번째 콘텐츠풀 페인트)**를 획기적으로 개선합니다. 동적 콘텐츠가 예약된 Suspense 경계로 스트리밍되므로, 적절한 로딩 스켈레톤(skeleton)을 사용한다면 **CLS(누적 레이아웃 시프트)**도 최소화할 수 있습니다.

2. SEO 강화

검색 엔진은 빠른 페이지를 선호합니다. PPR은 제목, 설명, 주요 제품 데이터와 같은 가장 중요한 SEO 콘텐츠가 초기 HTML 응답에 즉시 포함되도록 보장합니다. 봇이 빈 쉘만 보게 될 수도 있는 순수 클라이언트 사이드 페칭과 달리, PPR은 시작부터 의미 있는 문서를 제공합니다.

3. 매끄러운 개인화

현대적인 이커머스에서 개인화는 필수입니다. "[사용자 이름]님 환영합니다"라는 메시지나 지역별 가격을 표시할 때, PPR을 사용하면 페이지의 대부분은 정적으로 유지하면서 특정 프래그먼트만 개인화할 수 있습니다. 이는 클라이언트 사이드 앱에서 자주 발생하는 "비인증 콘텐츠의 반짝임(flash)" 현상을 방지합니다.

4. 서버 부하 감소

페이지의 대부분이 사전 렌더링되어 에지에 캐싱되므로, 서버는 동적 "구멍"에 대한 로직만 실행하면 됩니다. 이는 모든 요청마다 전체 페이지를 렌더링해야 하는 전통적인 SSR에 비해 컴퓨팅 리소스를 크게 절감합니다.

구현 및 테스트 가이드

Next.js 15 기준으로 PPR은 여전히 실험적(experimental) 기능이지만, 매우 안정적이며 이커머스 스토어와 같이 성능이 중요한 애플리케이션에서 테스트하는 것을 권장합니다.

1단계: 실험적 플래그 활성화

먼저 next.config.ts(또는 .js) 파일에서 PPR을 활성화해야 합니다.

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental', // 경로별로 선택 적용하기 위해 'incremental' 사용
  },
};

export default nextConfig;

2단계: 경로 레벨에서 적용

incremental 플래그를 사용하면 PPR을 사용할 경로를 선택할 수 있습니다. 레이아웃이나 페이지 파일에 experimental_ppr 상수를 추가하십시오.

// app/products/[slug]/page.tsx
export const experimental_ppr = true;

export default function ProductPage({ params }) {
  return (
    <main>
      <ProductDetails slug={params.slug} />
      <Suspense fallback={<CartSkeleton />}>
        <DynamicCartSummary />
      </Suspense>
      <Suspense fallback={<RecommendationSkeleton />}>
        <RelatedProducts slug={params.slug} />
      </Suspense>
    </main>
  );
}

3단계: 전략적인 React Suspense 사용

성공적인 PPR의 핵심은 <Suspense /> 경계의 위치입니다.

• 동적 컴포넌트 감싸기: cookies(), headers()를 호출하거나 동적 페칭을 수행하는 모든 컴포넌트는 반드시 Suspense로 감싸야 합니다.
• 스켈레톤 제공: 레이아웃 시프트를 방지하기 위해 동적 콘텐츠의 최종 크기와 일치하는 로딩 스켈레톤을 사용하십시오.

"dynamicIO" 및 "use cache" 기본 요소

Next.js 15는 PPR을 보완하는 dynamicIO 플래그와 use cache 지시어를 도입했습니다. 새로운 모델에서 Next.js는 "기본 캐싱"에서 명시적인 "선택적 캐싱(opt-in)" 모델로 전환하고 있습니다.

• dynamicIO: 활성화되면 use cache 경계 밖이나 Suspense로 감싸지 않은 동적 컴포넌트에서 데이터 페칭이나 동적 접근이 발생할 경우 빌드 시 오류를 발생시킵니다. 이를 통해 성능 프로필을 훨씬 더 예측 가능하게 만들 수 있습니다.
• use cache: 이는 함수나 컴포넌트의 출력을 캐싱할 수 있게 해주는 새로운 지시어("use server"와 유사)입니다. PPR과 결합하여 나머지 경로는 동적으로 유지하면서 특정 고비용 계산이나 API 호출만 캐싱할 수 있습니다.

이커머스 PPR을 위한 베스트 프랙티스

1. 스켈레톤 최적화

정적 쉘이 즉시 전달되므로 사용자는 로딩 스켈레톤을 보게 됩니다. 이를 최종 콘텐츠와 최대한 유사하게 만드십시오. 제품 카드의 경우 이미지의 가로세로 비율과 텍스트 블록의 대략적인 높이를 포함하십시오.

2. "폴드(Fold)" 상단 영역을 정적으로 유지

스크롤 없이 보이는 "폴드 상단(above the fold)" 영역이 대부분 정적이 되도록 하십시오. 주요 제품 이미지나 가격이 동적이라면 **LCP(최대 콘텐츠풀 페인트)**가 지연될 수 있습니다. 필수적인 SEO 및 전환 요소는 정적 쉘에 유지하는 것이 좋습니다.

3. 동적 구멍 모니터링

페이지의 모든 동적 구멍은 약간의 오버헤드를 추가합니다. PPR은 효율적이지만, 수십 개의 작은 동적 구멍이 있으면 사용자에게 "팝인(pop-in)" 피로감을 줄 수 있습니다. 관련 있는 동적 요소들은 적절하게 하나의 Suspense 경계로 그룹화하십시오.

4. 글로벌 데이터에 "use cache" 활용

몇 분마다 업데이트되는 전역 재고 수준과 같이 동적이지만 많은 사용자가 공유하는 데이터의 경우, 재검증 주기(ISR)와 함께 use cache 지시어를 사용하여 모든 요청마다 데이터베이스를 조회하는 것을 피하십시오.

자주 묻는 질문 (FAQ)

Q1: PPR을 실무 환경(Production)에서 사용할 수 있습니까?

Next.js 15에서 PPR은 실험적 기능으로 분류됩니다. 많은 대규모 사이트가 이미 이를 테스트하고 있지만, 주의해서 사용해야 합니다. "incremental" 옵션을 통해 주요 제품 페이지에 적용하기 전에 트래픽이 적은 페이지에서 먼저 테스트해 볼 수 있습니다.

Q2: PPR이 증분 정적 재생성(ISR)을 대체합니까?

아니요, 두 기능은 상호 보완적입니다. ISR은 페이지가 언제 업데이트되는지를 결정하고, PPR은 페이지가 어떻게 렌더링되고 전달되는지를 결정합니다. PPR 페이지의 정적 쉘을 매시간 업데이트하기 위해 ISR을 사용하면서, 동적 구멍은 매 요청마다 실시간 데이터를 페칭하도록 할 수 있습니다.

Q3: PPR이 호스팅 비용에 어떤 영향을 미칩니까?

PPR은 각 요청에 필요한 컴퓨팅 리소스를 줄여 실제로 비용을 낮출 수 있습니다. 쉘이 에지에서 캐싱되므로 서버 실행 시간을 절약할 수 있습니다. 다만, Vercel이나 Lambda 스트리밍을 지원하는 AWS와 같이 스트리밍이 가능한 호스팅 제공업체를 사용해야 합니다.

Q4: Pages 라우터에서도 PPR을 사용할 수 있습니까?

아니요, PPR은 Next.js App Router 전용 기능입니다. 이는 App Router의 파일 시스템 기반 메타데이터와 React 서버 컴포넌트 및 Suspense 간의 깊은 통합에 의존하기 때문입니다.

Q5: 사용자 연결 속도가 느려도 PPR이 작동합니까?

네, PPR은 오히려 느린 연결 환경에서 더 효과적입니다. 브라우저는 CSS와 기본 구조가 포함된 정적 쉘을 즉시 수신합니다. 이를 통해 브라우저는 스트림을 통해 동적 청크(chunks)가 도착하기를 기다리는 동안 페이지 파싱과 렌더링을 시작할 수 있습니다.

결론

Next.js 15 부분 사전 렌더링(PPR)은 단순한 성능 향상을 넘어, 동적 웹 애플리케이션을 구축하는 방식의 패러다임 변화를 의미합니다. 정적 렌더링과 동적 렌더링 사이의 벽을 허물어줌으로써, 이커머스 개발자들은 눈부시게 빠르면서도 깊이 있게 개인화된 스토어를 구축할 수 있게 되었습니다.

2026년으로 접어들면서 PPR은 고성능 커머스의 표준이 될 것으로 예상됩니다. 지금 바로 이를 도입하여 SEO, 사용자 경험, 그리고 전환율 측면에서 강력한 경쟁 우위를 확보해 보십시오.

고성능 웹 개발에 대한 더 많은 가이드는 기술 가이드 섹션에서 확인하실 수 있습니다.