Learn Next.js 제 10장 : Partial Prerendering

-ai를 사용해 개념정리 했음을 공지합니다.-

 

📌 Next.js의 부분 프리렌더링 (Partial Prerendering, PPR)

**부분 프리렌더링(Partial Prerendering, PPR)**은 Next.js 14에서 도입된 실험적 기능으로,
정적(Static) 콘텐츠와 동적(Dynamic) 콘텐츠를 한 페이지에서 동시에 활용할 수 있도록 해주는 새로운 렌더링 방식이에요.

---

✅ 기존 렌더링 방식의 문제점

Next.js에서는 기존에 페이지를 렌더링 할 때 두 가지 방식을 사용했어요.

1. 정적 생성(Static Generation, SSG)
   • 빌드 시 HTML을 생성하여 빠르게 제공.
   • 데이터가 거의 변경되지 않는 페이지에 적합.
   • 하지만, 실시간 데이터가 필요할 경우 사용하기 어려움.
2. 서버 사이드 렌더링(Server-Side Rendering, SSR)
   • 매 요청마다 데이터를 가져와서 페이지를 생성.
   • 동적 데이터를 실시간으로 반영할 수 있음.
   • 하지만, 매 요청마다 서버에서 생성하므로 속도가 느려질 수 있음.

🚨 문제점:

• 페이지의 일부는 정적이어야 하고, 일부는 동적이어야 하는 경우, 기존 방식에서는 전체 페이지를 SSR로 처리해야 했음.
• 결과적으로 불필요한 SSR이 발생하여 성능이 저하됨.

---

✅ 부분 프리렌더링(Partial Prerendering, PPR)이란?

정적 콘텐츠(Static)와 동적 콘텐츠(Dynamic)를 같은 페이지에서 효율적으로 결합하는 기술.

• 정적 요소는 빌드 시 생성된 HTML을 사용하여 빠르게 로드.
• 동적 요소는 런타임(요청 시점)에 가져와서 비동기적으로 로드.

🚀 결과적으로:

• 사용자는 정적 콘텐츠를 즉시 볼 수 있고, 동적 콘텐츠는 나중에 로딩되도록 처리할 수 있음.
• 초기 페이지 로딩 속도가 빨라지고, 서버 부담이 줄어듦.

---

✅ 부분 프리렌더링(PPR)의 동작 방식

Next.js에서 PPR을 활성화하면,
Next.js는 페이지의 정적 부분과 동적 부분을 자동으로 구분하고,
각각을 최적의 방식으로 렌더링해요.

🔹 예제 코드 (Next.js 14에서 PPR 적용)

export default function Page() {
  return (
    {/* 정적 콘텐츠: 빌드 시 생성됨 */}
    Welcome to My Site
    {/* 동적 콘텐츠: 런타임에서 가져와서 렌더링 */}
  );
}

async function DynamicUserData() {
    const res = await fetch("https://api.example.com/user", { cache: "no-store" });
    const user = await res.json();

    return <p>Hello, {user.name}!</p>;
}

🚀 PPR이 적용되면:

• <h1>Welcome to My Site</h1> → 빌드 시 생성(SSG) → 즉시 표시됨 ✅
• <p>Hello, {user.name}!</p> → API 요청 후 표시됨(동적 렌더링) → 이후 업데이트됨 ✅

👉 즉, "부분적으로 미리 렌더링(SSG)" + "필요한 부분만 SSR" 하는 방식!

---

✅ 부분 프리렌더링(PPR)의 장점

✔ 빠른 로딩 속도: 정적 콘텐츠를 즉시 제공하여 사용자 경험 향상 🚀
✔ 서버 부하 감소: 동적 데이터는 필요한 시점에만 로드하여 서버 부담 최소화 🖥️
✔ React Suspense와 결합 가능: 동적 데이터를 Suspense를 활용하여 깔끔하게 로딩 UI 처리 💡
✔ SEO 친화적: 정적 요소는 사전 렌더링되어 검색엔진 최적화(SEO) 유지 가능 🔍

---

✅ PPR을 언제 사용해야 할까?

✅ 페이지의 대부분이 정적이고, 일부 데이터만 실시간으로 변경될 때
✅ 사용자가 빠르게 첫 화면을 볼 수 있도록 최적화하고 싶을 때
✅ SEO가 중요한 페이지에서 일부 동적 요소만 추가하고 싶을 때

---

✅ 결론

• Next.js 14에서 도입된 새로운 렌더링 방식
• 정적(SSG) + 동적(SSR)을 한 페이지에서 동시에 처리 가능
• 페이지 로딩 속도를 극대화하면서, 동적 데이터를 실시간으로 불러올 수 있음
• React Suspense와 결합하여 더욱 효율적인 UI 구성 가능

이제 **부분 프리렌더링(PPR)**을 이해했으니, Next.js의 성능 최적화 및 사용자 경험 향상에 적극 활용할 수 있을 거예요! 🚀😊

---

적용 방법은 간단합니다.

Next.js의 카나리아 릴리스를 설치

pnpm install next@canary

 

next.config.ts

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental'
  }
};
 
export default nextConfig;

 

/app/dashboard/layout.tsx

import SideNav from '@/app/ui/dashboard/sidenav';
 
export const experimental_ppr = true;
 
// ...

next.config 파일에 위 내용을 추가하고 정적으로 사용되는 component에 적용시키면 됩니다.

 

layout.tsx에 export const experimental_ppr = true; 코드만 추가했는데 이게 적용이 된 게 맞는지 의구심이 들었습니다.

결론만 말하자면 Next.js는 특정 파일 내에서 export const로 선언된 변수들을 자동으로 감지하여 해당 경로의 설정으로 적용할 수 있도록 설계되어 있다는 것입니다.

experimental_ppr는 next.js의 파일시스템에서 예약된 변수이고 이것을 layout이라는 특수한 파일에서 export const로 선언했기 때문에 감지된 코드가 PPR을 적용시키는 역할을 합니다.

그렇게 해당 layout.tsx 파일이 포함된 경로에서 정적 콘텐츠(SSG)와 동적 콘텐츠(SSR)를 혼합해서 렌더링 하도록 설정됩니다.

 

next.js 에서는 이 기능의 안정성에 대해 경고하고 있습니다. 때문에 10장에서 알려준 내용을 무시하고 11장으로 넘어 가두 문제없다고 말하고 있습니다.

9장에서 스트리밍을 구현할 때 사용했던 서스펜스를 그대로 사용해서 구현하는 PPR이니 만큼 안정성이 확보된다면 사용하지 않을 이유가 없는 방식인 것 같습니다.

저는 일단 PPR을 적용시킨 채로 프로젝트를 진행하려고 합니다. 나중에 문제가 발생하거나 하면 이 포스트에 첨언해 놓겠습니다.