Next.js v15.3.5時点でのApp RouterにおけるPPRについての学習メモです。

Partial Prerendering(PPR)とは静的なコンテンツと動的なコンテンツを同じルートに組み合わせて表示することができるレンダリング方式。これを使うことにより静的なものは即座に表示（Static Rendering）、動的なものは常に最新を保つ（Dynamic Rendering）ことが可能になる。

partial-prerendering

設定方法

Next.js v15.3.5現在ではPPRはまだ実験的な機能のため、next.config.tsで設定を行う必要がある。設定値はboolean | 'incremental'で、'incremental'を設定するとPPRを有効にしたいページでexperimental_pprをtrueにする必要がある。

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}
 
export default nextConfig

export const experimental_ppr = true // incrementalにした時は必要

export default function Page() {
// ~~~~~~~~~~~~~~~~~

Suspense

PPRではReact Suspenseを使い、Suspenseの外側をStatic Rendering、内側をDynamic Renderingとしてレンダリングする。

export default function Page() {
  return (
    <>
      <StaticComponent /> // Static Rendering
      <Suspense fallback={<Fallback />}>
        <DynamicComponent /> // Dynamic Rendering
      </Suspense>
    </>
  )
}

PPRではStreamingを使うことで一回のレスポンスでStatic部分とDynamic部分を返すことができるので負荷を減らし全体的なパフォーマンスの向上が期待できる。