Next.js PPR(Partial Prerendering): SSR과 SSG의 기술적 합일점

1. 개요

Next.js 14에서 도입되어 15에서 정교화된 **PPR(Partial Prerendering)**은 정적 렌더링의 성능과 동적 렌더링의 유연성을 단일 페이지 내에서 결합한 새로운 렌더링 아키텍처다. 기존에는 페이지 단위로 정적 생성(SSG) 또는 서버 사이드 렌더링(SSR)을 강제 선택해야 했으나, PPR은 이를 컴포넌트 단위의 세분화된 전략으로 전환한다.

2. 기술적 메커니즘: Static Shell과 Dynamic Holes

PPR은 React의 Suspense 경계를 기준으로 페이지를 분할한다.

• 정적 셸(Static Shell): 빌드 타임에 미리 렌더링되는 HTML 구조다. 네비게이션 바, 레이아웃, 이미지 프레임 등 사용자 요청과 무관한 요소들이 포함된다.
• 동적 구멍(Dynamic Holes): Suspense로 감싸진 영역으로, 사용자 쿠키, 세션, DB 쿼리 등 런타임 데이터가 필요한 부분이다.
• HTTP 스트리밍: 서버는 요청 즉시 캐시된 정적 셸을 먼저 전송(Fast TTFB)하고, 연결을 유지한 상태에서 동적 컴포넌트가 서버에서 완성되는 대로 HTML 조각을 스트리밍한다.

3. SEO(검색 엔진 최적화) 관점의 분석

PPR 아키텍처는 검색 엔진 크롤러에게 다음과 같이 대응한다.

• 메타데이터 우선순위: head 내의 Title, Meta 태그는 대개 정적 셸에 포함되어 즉시 전달되므로 크롤러가 사이트 정보를 수집하는 데 지연이 없다.
• 스트림 대기 메커니즘: Googlebot 등 최신 크롤러는 HTTP 연결을 유지하며 스트리밍되는 콘텐츠를 기다린다. 클라이언트 사이드 자바스크립트 실행 없이 서버에서 완성된 HTML 조각이 순차적으로 들어오기 때문에 CSR(Client Side Rendering)보다 인덱싱 안정성이 높다.
• Core Web Vitals: 최초 바이트 전송 속도(TTFB)와 최대 콘텐츠 렌더링 시간(LCP)이 비약적으로 단축되어 검색 순위 산정에 유리한 지표를 형성한다.

4. 성능상 이점

• Zero-JS 초기 로드: 초기 셸은 자바스크립트 실행 없이도 화면에 즉시 렌더링된다.
• 병렬 데이터 페칭: 동적 영역들이 각각 독립적인 Suspense 경계를 가지므로, 느린 API 호출이 전체 페이지의 로딩을 막지 않는 병목 현상 해소가 가능하다.

5. 구현 및 설정

Next.js 15 환경의 next.config.js에서 실험적 옵션을 활성화하여 적용한다.

JavaScript

// next.config.js const nextConfig = { experimental: { ppr: 'incremental', // 점진적 도입 시 }, };

TypeScript

`// app/page.tsx import { Suspense } from 'react'; import { StaticComponent, DynamicComponent } from './components';

export default function Page() { return ( <main> <StaticComponent /> {/* 즉시 렌더링 /} <Suspense fallback={<Skeleton />}> <DynamicComponent /> {/ 서버에서 준비되는 대로 스트리밍 */} </Suspense> </main> ); }`

6. 결론

PPR은 정적 콘텐츠의 즉각적인 응답 속도와 동적 콘텐츠의 실시간성을 동시에 확보한다. 이는 단순히 로딩 속도를 높이는 것을 넘어, 복잡한 인프라 설정 없이도 고성능 SEO와 최적화된 사용자 경험을 동시에 달성할 수 있는 Next.js의 핵심 렌더링 전략이다.