Next.js에서는 라우트 내에서 데이터베이스 쿼리와 같은 동적 함수를 호출하면 해당 라우트 전체가 동적으로 변한다.

대부분의 라우트는 완전히 정적이거나 동적이지 않는다.

(예)
이커머스 사이트 경우 제품 정보 페이지를 대부분을 정적으로 렌더링하고 싶지만, 사용자의 장바구니와 추천 제품을 동적으로 가져와 개인화된 콘텐츠를 사용자게에 보여주고 싶어 한다.

대시보드 페이지

정적으로 렌더링할 컴포넌트

• nav바
• 일반 정보: 소개 문구나 고정된 데이터

동적으로 렌더링할 컴포넌트

• 사용자별 통계: 로그인한 사용자마다 다를 수 있는 정보들
• 실시간 알림: 실시간 업데이트되는 데이터

Partial Prerendering

Next.js 14에 도입된 partical prerendering은 정적, 동적 렝더링의 이점을 동일한 라우트에서 결합할 수 있는 새로운 렌더링 모델이다.

이 방식은 페이지의 일부를 정적, 일부는 동적으로 렌더링하여 더 나은 성능과 사용자 경험을 제공한다.

예시:

정적 콘텐츠

• 네비게이션 바와 제품 정보

동적 콘텐츠

• 장바구니와 추천 상품

사용자가 라우트를 방문할 때 동작 과정

1. 정적 라우트 쉘 제공

• 네비게이션 바와 제품 정보를 포함한 정적 콘텐츠가 먼저 로드된다.
• 이로 인해 초기 로드 속도가 매우 빠르다.

2. 동적 콘텐츠 비동기 로드

• 장바구니, 추천 상품과 같은 동적 콘텐츠는 나중에 비동기적으로 로드된다.

• 초기 정적 쉘에는 동적 콘텐츠가 로드될 공간이 마련되어 있다.

3. 비동기 콘텐츠 스트리밍

• 동적 콘텐츠는 병렬로 스트리밍되어 페이지 전체의 로드 시간을 줄여준다.
• 사용자는 모든 데이터가 로드될 때까지 기다리지 않고도 페이지의 일부를 보고 상호 작용할 수 있다.

PPR을 활성화하기 위한 next.config.mjs 설정

partial Prerendering을 next.js 앱에 추가하고 활성화하기 위해, 'next.config.mjs'파일에서 설정을 해야 한다.
이를 통해 Next.js에서 새로 도입된 부분 사전 렌더링이 가능하다.

// next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};

export default nextConfig;

ppr: 'incremental' 옵션을 사용하면 특정 경로에 대해 부분 사전 렌더링을 적용할 수 있다.

예시

//정적
// pages/product.tsx
import dynamic from 'next/dynamic';
import { Suspense } from 'react';

const DynamicCart = dynamic(() => import('../components/Cart'), {
  suspense: true,
});
const DynamicRecommendedProducts = dynamic(() => import('../components/RecommendedProducts'), {
  suspense: true,
});

export default function ProductPage() {
  return (
    <main>
      <nav>/* 정적 네비게이션 바 */</nav>
      <section>/* 정적 제품 정보 */</section>
      <Suspense fallback={<div>Loading cart...</div>}>
        <DynamicCart />
      </Suspense>
      <Suspense fallback={<div>Loading recommended products...</div>}>
        <DynamicRecommendedProducts />
      </Suspense>
    </main>
  );
}

//동적
// components/Cart.tsx
export default function Cart() {
  // 동적 장바구니 로직
  return <div>Cart</div>;
}

// components/RecommendedProducts.tsx
export default function RecommendedProducts() {
  // 동적 추천 상품 로직
  return <div>Recommended Products</div>;
}

요약

• next.config.mjs 파일에 experimental.ppr: 'incremental' 설정을 추가하여 부분 사전 렌더링을 활성화합니다.
• 동적 import와 Suspense를 사용하여 페이지의 일부를 동적으로 로드하고 나머지를 정적으로 렌더링합니다.