Next.js: 部分プリレンダリング (PPR)

// app/dashboard/page.tsx
import { Suspense } from 'react'
import { NavBar } from '@/components/NavBar'
import { UserGreeting } from '@/components/UserGreeting'
import { NotificationList } from '@/components/NotificationList'
import { Skeleton } from '@/components/Skeleton'

export default function DashboardPage() {
  return (
    <div>
      <NavBar />                           {/* 静的シェル: ビルド時に生成 */}
      <Suspense fallback={<Skeleton />}>  {/* 動的境界 */}
        <UserGreeting />
      </Suspense>
      <Suspense fallback={<Skeleton />}>
        <NotificationList />
      </Suspense>
    </div>
  )
}

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    ppr: true  // PPR を有効化
  }
}

export default nextConfig

# 設定後、開発サーバーを起動
npm run dev

React コンポーネントがブラウザで説明された UI をレンダリングします。

// app/ppr-compare/page.tsx — PPR が有効化されると自動的に適用されます
import { Suspense } from 'react'

// 静的シェル部分 (ビルド時に生成)
export default function PprComparePage() {
  return (
    <div>
      <header style={{ background: '#f0f0f0', padding: 16 }}>
        <h1>PPR Demo</h1>
        <nav><a href="/">Home</a> | <a href="/about">About</a></nav>
      </header>

      {/* 動的境界: リクエストごとに新しく取得 */}
      <Suspense fallback={<div style={{ padding: 16 }}>ユーザーを読み込み中...</div>}>
        <RealtimeUser />
      </Suspense>

      {/* 静的境界: ビルド時にレンダリング */}
      <footer style={{ borderTop: '1px solid #ddd', padding: 16 }}>
        <p>Built at: {new Date().toISOString()}</p>
      </footer>
    </div>
  )
}

async function RealtimeUser() {
  const user = await fetch('https://api.example.com/me', { cache: 'no-store' })
    .then(r => r.json())
  return <div style={{ padding: 16 }}>Welcome, {user.name}</div>
}

レンダリング: 静的サイドバー + Suspense 境界内の動的ユーザープロフィールとプロジェクト統計を持つダッシュボード。

// app/dashboard/page.tsx
export default function DashboardPage() {
  return (
    <div>
      {/* ✅ 静的: サイドバーは常に同じ、リアルタイム更新不要 */}
      <Sidebar />

      {/* ✅ 動的: リアルタイム取得が必要 */}
      <Suspense fallback={<LoadingSpinner />}>
        <RealtimeData />
      </Suspense>

      {/* ❌ 不要な Suspense: このコンポーネントには動的データがない */}
      <Suspense fallback={<LoadingSpinner />}>
        <StaticAboutSection />  {/* ラップ不要 */}
      </Suspense>
    </div>
  )
}

静的シェルを即座にレンダリングし、Suspense 境界内で動的コンテンツを読み込みます。
Fallback: }>
表示テキスト: }> | }>

// app/ppr-timing/page.tsx
import { Suspense } from 'react'

export default function PprTimingPage() {
  return (
    <div>
      <h1>PPR Timing Demo</h1>
      {/* 静的シェル: 即座に表示 */}
      <p>このテキストは即座に表示されます (静的シェル)</p>

      {/* 動的境界1: 2秒後に表示 */}
      <Suspense fallback={<div>⏳ セクション1を読み込み中...</div>}>
        <DelayedSection label="Section 1" delay={2000} />
      </Suspense>

      {/* 動的境界2: 4秒後に表示、境界1とは独立 */}
      <Suspense fallback={<div>⏳ セクション2を読み込み中...</div>}>
        <DelayedSection label="Section 2" delay={4000} />
      </Suspense>
    </div>
  )
}

async function DelayedSection({ label, delay }: { label: string; delay: number }) {
  await new Promise(resolve => setTimeout(resolve, delay))
  return <div>✅ {label} loaded after {delay}ms</div>
}

静的シェルを即座にレンダリングし、Suspense 境界内で動的コンテンツを読み込みます。
Fallback: ⏳ Loading section 1...
表示テキスト: PPR Timing Demo | This appears instantly (static shell) | ⏳ Loading section 1... | }>

レンダリング戦略の図: 静的シェル + 動的 Suspense 境界。

// app/dashboard-ppr/page.tsx — PPR 実践設計
import { Suspense } from 'react'

// ======== 静的シェルコンポーネント ========
function DashboardHeader() {
  return (
    <header style={{ background: '#1a1a2e', color: 'white', padding: '16px 24px' }}>
      <h1 style={{ margin: 0 }}>TaskFlow Dashboard</h1>
    </header>
  )
}

function Sidebar() {
  return (
    <nav style={{ width: 240, background: '#f5f5f5', padding: 16, minHeight: 'calc(100vh - 64px)' }}>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        <li><a href="/">🏠 Home</a></li>
        <li><a href="/projects">📁 Projects</a></li>
        <li><a href="/tasks">✅ Tasks</a></li>
        <li><a href="/analytics">📊 Analytics</a></li>
        <li><a href="/settings">⚙️ Settings</a></li>
      </ul>
    </nav>
  )
}

// ======== 動的境界コンポーネント ========
async function UserProfile() {
  const user = await fetch('https://api.example.com/me', { cache: 'no-store' }).then(r => r.json())
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <img src={user.avatar} alt="" style={{ borderRadius: '50%', width: 40, height: 40 }} />
      <div>
        <strong>{user.name}</strong>
        <p style={{ margin: 0, fontSize: 12, color: '#666' }}>{user.role}</p>
      </div>
    </div>
  )
}

async function ProjectStats() {
  const stats = await fetch('https://api.example.com/stats', { next: { revalidate: 60 } }).then(r => r.json())
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
      <StatCard label="Active Projects" value={stats.activeProjects} color="#4caf50" />
      <StatCard label="Pending Tasks" value={stats.pendingTasks} color="#ff9800" />
      <StatCard label="Completed" value={stats.completed} color="#2196f3" />
    </div>
  )
}

function StatCard({ label, value, color }: { label: string; value: number; color: string }) {
  return (
    <div style={{ border: `1px solid ${color}`, borderRadius: 8, padding: 16, textAlign: 'center' }}>
      <p style={{ fontSize: 28, fontWeight: 'bold', color, margin: 0 }}>{value}</p>
      <p style={{ margin: 0, color: '#666', fontSize: 14 }}>{label}</p>
    </div>
  )
}

export default function DashboardPprPage() {
  return (
    <div style={{ display: 'flex' }}>
      <Sidebar />
      <main style={{ flex: 1, padding: 24 }}>
        <DashboardHeader />
        <Suspense fallback={<div>プロフィールを読み込み中...</div>}>
          <UserProfile />
        </Suspense>
        <div style={{ height: 24 }} />
        <Suspense fallback={<div>統計を読み込み中...</div>}>
          <ProjectStats />
        </Suspense>
      </main>
    </div>
  )
}

データをサーバーサイドで取得し、ページに結果をレンダリングします。
表示内容: TaskFlow Dashboard

// app/ppr-ecommerce/page.tsx — PPR e コマースダッシュボード
import { Suspense } from 'react'
import { cookies } from 'next/headers'

// ======== 静的シェル ========
function StoreHeader() {
  return (
    <header style={{ background: '#2c3e50', color: 'white', padding: '12px 24px', display: 'flex', justifyContent: 'space-between' }}>
      <strong>Store Dashboard</strong>
      <span>Built: {new Date().toISOString().split('T')[0]}</span>
    </header>
  )
}

function Navigation() {
  return (
    <nav style={{ background: '#34495e', padding: '8px 24px', display: 'flex', gap: 24, color: 'white' }}>
      <a href="/ppr-ecommerce" style={{ color: 'white' }}>Overview</a>
      <a href="/ppr-ecommerce/orders" style={{ color: 'white' }}>Orders</a>
      <a href="/ppr-ecommerce/products" style={{ color: 'white' }}>Products</a>
    </nav>
  )
}

// ======== 動的コンポーネント ========
async function LiveOrderFeed() {
  const orders = await fetch('https://api.example.com/orders/recent', {
    cache: 'no-store'
  }).then(r => r.json())

  return (
    <div style={{ border: '1px solid #ddd', borderRadius: 8, padding: 16 }}>
      <h2>Live Orders ({orders.length})</h2>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead><tr><th>Order</th><th>Customer</th><th>Status</th><th>Total</th></tr></thead>
        <tbody>
          {orders.map((o: any) => (
            <tr key={o.id}>
              <td>#{o.id}</td>
              <td>{o.customer}</td>
              <td><StatusBadge status={o.status} /></td>
              <td>${o.total}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

function StatusBadge({ status }: { status: string }) {
  const colors: Record<string, string> = {
    pending: '#ff9800', shipped: '#2196f3', delivered: '#4caf50', cancelled: '#f44336'
  }
  return <span style={{ background: colors[status] ?? '#ccc', color: 'white', padding: '2px 8px', borderRadius: 12, fontSize: 12 }}>{status}</span>
}

async function RevenueWidget() {
  const revenue = await fetch('https://api.example.com/revenue/today', {
    next: { revalidate: 300 }
  }).then(r => r.json())

  return (
    <div style={{ background: 'linear-gradient(135deg, #667eea, #764ba2)', color: 'white', borderRadius: 8, padding: 24 }}>
      <h2 style={{ margin: 0, fontSize: 14, opacity: 0.8 }}>本日の売上</h2>
      <p style={{ fontSize: 36, fontWeight: 'bold', margin: '8px 0' }}>${revenue.total}</p>
      <p style={{ margin: 0, fontSize: 12, opacity: 0.8 }}>↑ {revenue.growth}% vs 昨日</p>
    </div>
  )
}

async function TopProducts() {
  const products = await fetch('https://api.example.com/products/top', {
    next: { tags: ['top-products'] }
  }).then(r => r.json())

  return (
    <div style={{ border: '1px solid #ddd', borderRadius: 8, padding: 16 }}>
      <h2>Top Products</h2>
      <ol>{products.slice(0, 5).map((p: any) => (
        <li key={p.id}>{p.name} — {p.sold} sold</li>
      ))}</ol>
    </div>
  )
}

// ======== ページ (PPR 混合) ========
export default function PprEcommercePage() {
  return (
    <div>
      <StoreHeader />
      <Navigation />
      <main style={{ padding: 24, display: 'grid', gap: 24, gridTemplateColumns: '2fr 1fr' }}>
        <div>
          <Suspense fallback={<div>注文を読み込み中...</div>}>
            <LiveOrderFeed />
          </Suspense>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <Suspense fallback={<div>売上を読み込み中...</div>}>
            <RevenueWidget />
          </Suspense>
          <Suspense fallback={<div>商品を読み込み中...</div>}>
            <TopProducts />
          </Suspense>
        </div>
      </main>
    </div>
  )
}

# ビルド後の静的シェル出力を確認
npm run build

# .next/server/app/ppr-ecommerce にスクロールして確認
ls .next/server/app/ppr-ecommerce/

page.html          ← 静的シェル HTML (ナビゲーションバー、レイアウト)
page.rsc           ← RSC Payload (静的セクション)
page_stream.html   ← ストリーミング部分注入ポイント

上記の説明通りにページをレンダリングし、説明の動作に基づいて UI が更新されます。

// app/ppr-verify/page.tsx
import { Suspense } from 'react'

function StaticHeader() {
  return (
    <header style={{ borderBottom: '2px solid #333', padding: 16, marginBottom: 16 }}>
      <h1>PPR Verification Page</h1>
      <p>ビルドタイムスタンプ: {new Date().toISOString()}</p>
      <nav><a href="/">Home</a> | <a href="/ppr-verify">Refresh</a></nav>
    </header>
  )
}

async function DynamicContent() {
  const res = await fetch('http://worldtimeapi.org/api/timezone/Etc/UTC', {
    cache: 'no-store'
  }).then(r => r.json())

  return (
    <div style={{ background: '#e3f2fd', padding: 16, borderRadius: 8 }}>
      <h2>ライブサーバー時刻</h2>
      <p style={{ fontSize: 24 }}>{res.datetime}</p>
    </div>
  )
}

export default function PprVerifyPage() {
  return (
    <div>
      <StaticHeader />
      <Suspense fallback={<div style={{ padding: 16 }}>⏳ ライブ時刻を読み込み中...</div>}>
        <DynamicContent />
      </Suspense>
      <footer style={{ marginTop: 32, color: '#666' }}>
        <p>ヘッダーは静的シェル (キャッシュ)。動的コンテンツはリクエストごとに更新されます。</p>
      </footer>
    </div>
  )
}

データをサーバーサイドで取得し、ページに結果をレンダリングします。
表示内容: PPR Verification Page