5관문. PPR (Partial Prerendering)

관문 5 / 7

정적 레이아웃을 즉시 전송하고 동적 콘텐츠를 Suspense 스트리밍으로 채우는 PPR을 구현하라.

📖 이론 비급

Partial Prerendering: 정적과 동적의 공존

기존엔 페이지 전체가 정적이거나 동적이었다. PPR은 하나의 페이지에서 정적 껍데기는 즉시 CDN에서 전송하고, 동적 구멍(Hole)은 서버에서 Streaming으로 채운다.

활성화: next.config.js에서 experimental.ppr: true 설정. 정적 부분은 빌드 시 렌더링되어 엣지에서 즉시 응답하고, <Suspense>로 감싼 동적 부분만 서버에서 지연 전송된다.

⚔️ 수련 코드

// next.config.js에 experimental.ppr: true 추가 필요
import { Suspense } from 'react';

// 정적 콘텐츠 (빌드 시 생성, CDN 캐시)
function StaticLayout({ children }) {
  return (
    <div>
      <nav>정적 네비게이션 (즉시 표시)</nav>
      <main>{children}</main>
    </div>
  );
}

// 동적 콘텐츠 (요청마다 새로 생성)
async function DynamicUserGreeting() {
  // 실제로는 쿠키/세션에서 사용자 정보 읽기
  const user = { name: '수련생' };
  return <p>안녕하세요, {user.name}님!</p>;
}

async function DynamicRecommendations() {
  await new Promise(r => setTimeout(r, 500));
  return <p>오늘의 추천 수련: useState 관문</p>;
}

export default function Page() {
  return (
    <StaticLayout>
      {/* TODO: 동적 컴포넌트들을 Suspense로 감싸라
          정적 레이아웃은 즉시 표시되고
          동적 부분만 스트리밍으로 채워진다 */}
      <DynamicUserGreeting />
      <DynamicRecommendations />
    </StaticLayout>
  );
}

Open Sandbox