Progressive Partial Rendering(PPR)을 알아보자아!

하영·2025년 6월 5일

Progressive Partial Rendering next.js ppr

Next.js

목록 보기

19/19

Progressive Partial Rendering(PPR)

01. Progressive Partial Rendering(PPR) 란?

Progressive Partial Rendering(PPR)은 서버 컴포넌트와 React의 streaming 기능을 활용하여 페이지의 일부를 먼저 렌더링하고, 나머지를 점진적으로 렌더링하는 방식이다.

⭐️ 전체 페이지가 완성될 때까지 기다리지 않고, 준비된 컴포넌트부터 보여주는 기술이다.

02. 왜 PPR이 필요할까?

기존 SSR(Server Side Rendering)방식은 전체 페이지를 서버에서 만든 다음, 브라우저에서 보내는 방식이다.
이럴 경우 데이터 fetching이 느리면 페이지 전체 렌더링이 지연될 수 있다.

특히 여러 개의 API를 병렬적으로 호출하고 조합해야하는 큰 큐모 프로젝트 페이지에서는 사용자가 기다리는 시간이 길어지게 된다.

→ 이런 문제를 해결하고자 등장한게 PPR이다.

03. PPR 동작 방식

PPR은 React 18의 streaming + Suspense + Next.js의 서버 컴포넌트를 활용해 작동한다.

빠르게 준비된 UI 컴포넌트는 먼저 렌더링 된다.
아직 데이터를 불러오고 있는 컴포넌트는 Suspense fallback = {<Loading />}으로 감싸서 로딩 UI를 보여준다.
데이터 준비가 완료되면 해당 부분만 브라우저에 스트리밍되어 보여진다.

✅ 예시 코드

import { Suspense } from "react";
import UserList from "@/components/UserList";
import NewsSection from "@/components/NewsSection";

export default function Home() {
  return (
    <main>
      <h1>홈 페이지</h1>

      <Suspense fallback={<p>사용자 목록 불러오는 중...</p>}>
        <UserList />
      </Suspense>

      <Suspense fallback={<p>뉴스 섹션 불러오는 중...</p>}>
        <NewsSection />
      </Suspense>
    </main>
  );
}

<h1> 같은 빠르게 보여지는 UI 컴포넌트는 즉시 렌더링되고 나머지 컴포넌트의 데이터가 준비되면 추가 렌더링된다.

04. PPR의 장점

전체 페이지가 늦게 뜨는 대신, 빠른 컴포넌트부터 보여주기 때문에 퍼포먼스가 향상된다.
- First Contentful Paint(FCP)와 Time To Interactive(TTI) 같은 성능 지표를 개선하는데 도움이 된다.
사용자 입장에서 더 빠른 체감 속도로 UX가 개선된다.
SSR 기반이기 때문에 SEO에 친화적이다.
각각 Suspense 처리가 가능하여 컴포넌트 단위가 최적화된다.

05. Progressive Partial Rendering과 Lazy Loading의 차이점

React.lazy 같은 기능도 있는데 PPR과 어떤 차이점이 있는지 표로 정리해보았다.

항목	Progressive Partial Rendering (PPR)	Lazy Loading
정의	서버에서 데이터를 받아오는 컴포넌트를 스트리밍 방식으로 점진적 렌더링	클라이언트에서 사용자 시점에 따라 지연 로딩
동작 시점	초기 페이지 로딩 중 서버에서 일부 UI를 먼저 보내고 나머지는 점진 렌더링	스크롤 도달 시점, 사용자 상호작용 등 클라이언트 측에서 동적 로딩
활용 기술	React 18 Streaming, Suspense, Server Components, SSR	React.lazy, 동적 import, IntersectionObserver 등
위치	보통 서버 사이드 렌더링 시	보통 클라이언트 사이드에서 동작
목적	초기 렌더링 속도 향상, 중요한 부분 먼저 보여주기	불필요한 컴포넌트/페이지 지연 로딩으로 리소스 최적화
예시	대시보드 페이지에서 빠른 영역 먼저 렌더링 후 분석 차트는 늦게	스크롤해야 보이는 이미지나 모달 컴포넌트는 나중에 import

⭐️ PPR과 Lazy Loading은 비슷해보이지만 동작시점과 사용목적이 다르므로 명확히 알아둘 필요가 있다.

Lazy Loading : 주로 뷰포트 밖에 있는 이미지, 컴포넌트 같은 특정 리소스를 필요한 시점에 로드
PPR : 페이지의 핵심 부분을 먼저 렌더링하고 우선순위가 낮은 부분은 점진적으로 렌더링하는 전체적인 접근 방식 (더 넓은 개념임!)

5-1. 예시 코드

✅ PPR 예시 (Next.js + Suspense)

// 서버 렌더링 중 준비된 것부터 스트리밍 렌더링
<Suspense fallback={<p>데이터 불러오는 중...</p>}>
  <ServerComponent />
</Suspense>

서버 렌더링 중 준비된 것부터 렌더링
서버 컴포넌트가 아직 데이터 요청 중이라도 나머지 UI는 먼저 보여줌
React 18 streaming + Suspense 기능 활용

✅ Lazy Loading 예시 (React.lazy)

const SlowComponent = React.lazy(() => import('./SlowComponent'));

<Suspense fallback={<p>로딩 중...</p>}>
  <SlowComponent />
</Suspense>

/*------------------------------------------------------------------*/
// 스크롤 도달 시 이미지 lazy load
<img src="느린 이미지.jpg" **loading="lazy"** />