Partial Prerendering: 새로운 웹 애플리케이션 기본 렌더링 모델

Next.js의 Partial Prerendering(PPR)은 정적 엣지 배포의 속도와 완전한 동적 서버 렌더링 능력을 단일 React 렌더 트리에서 결합한 새로운 렌더링 모델이다. 빌드 시 생성된 정적 셸이 사용자에게 즉시 전달되고, 동적 콘텐츠는 React 스트리밍으로 채워진다.

핵심 포인트

정적 SSG와 동적 SSR의 트레이드오프를 제거한다. 한 페이지 안에서 두 렌더링 모델을 동시에 사용할 수 있다.
React Suspense 경계가 어떤 콘텐츠가 정적(셸)이고 어떤 콘텐츠가 동적인지를 결정한다.
빌드 시 Next.js가 각 페이지의 정적 셸(Suspense fallback 포함)을 생성해 엣지에 배포한다.
동적 부분은 headers(), cookies() 같은 요청별 정보에 접근할 때만 활성화된다.
클라이언트와 서버가 병렬로 작동해, 클라이언트가 스크립트와 스타일시트를 파싱하는 동안 서버가 동적 세그먼트를 스트리밍한다.
현재 experimental 단계로 프로덕션 사용은 GA 이후 권장한다.

상세 정리

기존 렌더링 트레이드오프: 정적 생성(SSG)은 빠르지만 개인화가 불가능하고, SSR은 동적이지만 모든 요청에서 서버 렌더링이 필요하다. PPR은 둘을 한 페이지 안에서 결합한다.
정적 셸 생성: 빌드 시 Next.js가 각 페이지를 렌더해 Suspense fallback이 채워진 정적 셸을 만든다. 이 셸은 엣지 CDN 전역에 배포된다.
Suspense 경계의 역할: Suspense로 감싼 컴포넌트가 동적 콘텐츠가 된다. ShoppingCart, Recommendations 같은 컴포넌트를 Suspense로 감싸면 해당 부분만 서버에서 스트리밍된다.
동적 활성화 조건: headers(), cookies() 등 요청별 정보에 접근할 때만 동적 렌더링이 발동한다. 그 외 부분은 정적 최적화가 유지된다.
ISR과의 결합: 정적 부분은 ISR의 온디맨드, 시간 기반, 태그 기반 재검증을 그대로 지원한다.
병렬 클라이언트-서버 작업: 정적 셸을 받은 클라이언트가 스크립트와 스타일시트를 파싱하는 동안 서버는 동적 세그먼트를 스트리밍으로 전송한다.
새 API 없음: 기존 Suspense 경계를 그대로 활용하므로 새로운 API를 배울 필요가 없다. App Router 기반 코드를 그대로 쓴다.
현재 상태: Next.js 14에서 experimental 플래그로 제공 중이며, 프로덕션 사용은 안정화 이후 권장한다.

왜 읽나- Next.js App Router에서 정적/동적 렌더링의 경계를 이해하고, PPR이 기존 SSG/SSR 구분을 어떻게 바꾸는지 원리부터 파악하고 싶은 프론트엔드, 풀스택 개발자에게 유용하다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

Partial Prerendering: 새로운 웹 애플리케이션 기본 렌더링 모델

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기