Next.js 16 use cacheとRSCストリーミング：TTFB 100ms達成

Next.js 15の時代に実験的機能（experimental.ppr）として紹介された Partial Prerendering（PPR）は、Next.js 16で完全に新しいパラダイムへと進化しました。従来の「このページは静的か、動的か？」という二分法的な レンダリング決定方式を脱し、単一ページ内でコンポーネント単位で静的/動的キャッシュ範囲を明示的に制御する"use cache"ディレクティブが標準となったのです。

この記事では、Next.js 16の"use cache"ディレクティブとReact Server Components（RSC）ストリーミングアーキテクチャを組み合わせ、TTFB（Time-to-First-Byte）100ms未満を達成し、Turbopackデフォルトバンドラーに基づく10倍高速なHMR開発環境まで構築するエンタープライズNext.js 16レンダリングアーキテクチャを 徹底ガイドします。

要約

• "use cache"ディレクティブ: コンポーネントや関数の先頭に宣言すると、その領域の出力がビルド時または初回レンダリング時に自動でエッジ/サーバーキャッシュに保存されます。以降のリクエストはキャッシュから即座に返却され、TTFBが100ms未満へと激減します。
• RSCストリーミング + Suspenseホール: 静的HTMLシェルが即座に送信され、動的領域（DBクエリ、API呼び出し）は<Suspense>バウンダリを通じてレンダリング完了次第、チャンク単位でストリーミング送信されます。
• Turbopackデフォルトバンドラー: RustベースのTurbopackがデフォルト搭載され、プロダクションビルド5倍、Fast Refresh 10倍の向上を達成しました。
• proxy.tsの導入: 従来のmiddleware.tsを代替してネットワーク境界を明確に分離し、認証・リダイレクトなどのエッジロジックをフレームワークレベルで公式サポートします。
• React 19.2統合: View Transitions API、useEffectEvent()、<Activity>コンポーネントなど最新のReact APIがネイティブで動作します。

1. 従来のPPR（Partial Prerendering） vs "use cache"アーキテクチャ

Next.js 14〜15のPPR実験モードとNext.js 16標準の核心的な違いです。

[Next.js 14-15 PPR (実験的)] ⚠️
next.config.js ──► experimental: { ppr: true } ──► ページ単位の静的/動的判定（暗黙的）

[Next.js 16 "use cache" (標準)] ⭕️
個別コンポーネント/関数 ──► "use cache" ディレクティブ 宣言 ──► コンポーネント単位の明示的キャッシュ制御

2. RSCストリーミングアーキテクチャ：静的シェル + 動的ホール二重レンダリング

Next.js 16公式ドキュメントに基づくストリーミングレンダリングの流れです。

[HTTPリクエスト受信]
        │
        ▼
[静的HTMLシェル即時送信] ──► ユーザーブラウザに0.5秒以内にレイアウト画面をレンダリング
        │                     (ヘッダー、ナビゲーション、フッターなどキャッシュされた静的コンテンツ)
        │
        ▼
[動的Suspenseホール並列ストリーミング]
   ├── <Suspense fallback={<Skeleton/>}>
   │     └── <ProductRecommendations/> ──► DBクエリ完了次第、即座にチャンク送信
   │
   └── <Suspense fallback={<Skeleton/>}>
         └── <UserReviews/> ──► APIレスポンス完了次第、即座にチャンク送信

この構造により、ユーザーはTTFB 100ms未満で全体レイアウトUIを閲覧でき、動的データはレンダリングが完了した順に画面へ挿入（Streaming）されます。

3. 実践実装コード："use cache" + RSC + Suspenseストリーミング

キャッシュコンポーネントの定義（app/components/ProductGrid.tsx）

// "use cache" ディレクティブを宣言すると、このサーバーコンポーネントのレンダリング結果が
// エッジ/サーバーキャッシュに自動保存され、以降のリクエストで即座に返却されます。
"use cache";

import { cacheTag } from 'next/cache';

interface Product {
  id: string;
  name: string;
  price: number;
  imageUrl: string;
}

export async function ProductGrid({ category }: { category: string }) {
  // Category別キャッシュタグ登録（緻密な無効化のため）
  cacheTag(`products-${category}`);

  const products: Product[] = await fetch(
    `https://api.store.com/products?category=${category}`,
  ).then(res => res.json());

  return (
    <section className="grid grid-cols-2 md:grid-cols-4 gap-6">
      {products.map(product => (
        <article key={product.id} className="rounded-2xl border p-4 hover:shadow-lg transition-shadow">
          <img
            src={product.imageUrl}
            alt={product.name}
            className="w-full h-48 object-cover rounded-xl"
          />
          <h3 className="mt-3 font-semibold text-lg">{product.name}</h3>
          <p className="text-brand-primary font-bold">${product.price.toLocaleString()}</p>
        </article>
      ))}
    </section>
  );
}

ストリーミングページの組み合わせ（app/shop/[category]/page.tsx）

import { Suspense } from 'react';
import { ProductGrid } from '@/components/ProductGrid';
import { UserReviews } from '@/components/UserReviews';
import { ProductSkeleton, ReviewSkeleton } from '@/components/Skeletons';

// このページは静的シェルが即座に送信され、動的領域がストリーミングで満たされます。
export default async function ShopCategoryPage({
  params,
}: {
  params: Promise<{ category: string }>;
}) {
  const { category } = await params;

  return (
    <main className="max-w-7xl mx-auto px-6 py-12">
      <h1 className="text-3xl font-bold mb-8">{category} コレクション</h1>

      {/* キャッシュされた製品グリッド："use cache"でTTFB激減 */}
      <Suspense fallback={<ProductSkeleton />}>
        <ProductGrid category={category} />
      </Suspense>

      {/* ユーザーレビュー：リアルタイムデータストリーミング */}
      <Suspense fallback={<ReviewSkeleton />}>
        <UserReviews category={category} />
      </Suspense>
    </main>
  );
}

キャッシュタグに基づく緻密な無効化（app/api/revalidate/route.ts）

import { revalidateTag } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';

// CMSで特定カテゴリの製品が更新された場合、該当タグのみ精密に無効化
export async function POST(request: NextRequest) {
  const { category, secret } = await request.json();

  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ error: 'Invalid secret' }, { status: 401 });
  }

  // サイト全体ではなく該当カテゴリの キャッシュのみ即座に無効化
  revalidateTag(`products-${category}`);

  return NextResponse.json({
    revalidated: true,
    tag: `products-${category}`,
    timestamp: Date.now(),
  });
}

4. Next.js 16 レンダリングパフォーマンスベンチマーク

10,000個の製品、500個のカテゴリ規模のECプロジェクトで測定した主要Web Vitalsベンチマークです。

Vite 8 & Rolldown 1.0バンドリングガイドで取り上げたRustベースのバンドラートレンドと同様に、Next.js 16のTurbopackもRustベースのコンパイラにより開発生産性を飛躍的に高めました。

5. proxy.ts: middleware.tsを代替するエッジネットワーク層

Next.js 16では、従来のmiddleware.tsの複雑さと曖昧な実行範囲を解決するため、**proxy.ts**という新しいネットワーク境界ファイルが導入されました。

// proxy.ts: エッジネットワーク層で実行されるリクエストプロキシ
import type { NextProxy } from 'next/proxy';

export default {
  async proxy(request: NextProxy) {
    const url = new URL(request.url);

    // 認証トークンがない場合、ログインページへ即座にリダイレクト
    const token = request.cookies.get('auth-token');
    if (!token && url.pathname.startsWith('/dashboard')) {
      return Response.redirect(new URL('/login', request.url));
    }

    // A/Bテスト: 50%のトラフィックを新しいUIバージョンにルーティング
    if (url.pathname === '/home' && Math.random() > 0.5) {
      url.pathname = '/home-v2';
      return fetch(url, request);
    }

    // デフォルト通過: 元のリクエストをNext.jsサーバーに転送
    return fetch(request);
  },
} satisfies NextProxy;

proxy.tsはCloudflare WorkersやVercel Edge Functions上で実行され、Cloudflare AI Gatewayコスト制御ガイドで解説したエッジネットワークプロキシパターンと完全に互換します。

6. エンタープライズ導入チェックリスト

よくある質問

"use cache"と従来のgetStaticProps / ISRは何が違いますか？

getStaticPropsとISRはページ全体単位でしかキャッシュ制御ができず、App Routerのfetchオプションに分散していました。“use cache”は個別のコンポーネントや関数にインラインで宣言し、同じページ内であってもAコンポーネントは10分間キャッシュ、Bコンポーネントはリアルタイムレンダリングといった制御が可能です。

Turbopackデフォルトバンドラーへの移行時、従来のWebpackプラグインは動作しますか？

大半の標準的なWebpackローダーやプラグインはTurbopack互換レイヤーを介して動作します。ただし、カスタムチェイニングが複雑なプラグインはTurbopackネイティブAPIへのマイグレーションが必要であり、公式マイグレーションガイドでプラグインごとの互換状態を確認できます。

Cloudflare PagesにNext.js 16をデプロイできますか？

はい、可能です。Next.js 16.2で導入されたBuild Adapters APIにより、Vercel以外のホスティングプラットフォーム（Cloudflare Pages、AWS Amplify、Netlifyなど）でも"use cache"およびRSCストリーミングが同様に動作します。

View Transitions APIはどのように使用しますか？

React 19.2のstartViewTransition() APIがNext.js 16に統合され、<Link>コンポーネント経由のルート遷移時にサードパーティ製ライブラリなしでCSS遷移アニメーションが自動適用されます。