Next.js Edge Runtime実践ガイド【2025年版】：低レイテンシとストリーミングを最大化する

いつEdgeを使うべきか（判断基準）

• 低レイテンシ配信が重要（グローバル分散・キャッシュ適合）
• 軽量な前処理/認可/AB振り分け/地理判定が主目的
• ストリーミングで体感速度を向上したい（RSC/SSR）

避けるケース：重いCPU処理、長時間接続のサーバーサイドI/O、Node専用APIが必須（fs等）。

Route Handlersでの基本構成

// app/api/hello/route.ts
export const runtime = 'edge';

export async function GET() {
  return Response.json({ message: 'hello from edge' }, {
    headers: { 'Cache-Control': 'public, max-age=60, stale-while-revalidate=300' },
  });
}

ポイント：

• runtime = 'edge' を明示。Node限定APIは使わない。
• キャッシュヘッダを積極活用（短TTL + SWR）。

ストリーミングSSR（RSC）

// app/edge-stream/page.tsx
export const runtime = 'edge';

export default async function Page() {
  const data = fetch('https://example.com/api', { cache: 'no-store' }).then(r => r.json());
  return (
    <main>
      <h1>Edge Streaming</h1>
      {/* サーバーコンポーネントの分割により段階描画 */}
      {/* 慣例的にSuspense境界で体感速度を改善 */}
      {/* @ts-expect-error Server Component */}
      <Content promise={data} />
    </main>
  );
}

// app/edge-stream/Content.tsx
export default async function Content({ promise }: { promise: Promise<any> }) {
  const data = await promise;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Middlewareのユースケース

// middleware.ts
import { NextResponse } from 'next/server';

export const config = { matcher: ['/articles/:path*'] };

export function middleware(req: Request) {
  const url = new URL(req.url);
  // 例：ジオ/AB判定/簡易Bot制御
  if (url.searchParams.get('ab') === 'b') {
    url.pathname = url.pathname.replace('/articles', '/exp/articles');
    return NextResponse.rewrite(url);
  }
  return NextResponse.next();
}

エッジでのデータアクセス

• フェッチは同一PoP近傍のキャッシュを活用。next: { revalidate } も検討。
• 簡易KV/キャッシュ層（外部サービス）を活用し、RTTを短縮。
• セッションはJWT/署名Cookieを使用し、ステートレスに設計。

// キャッシュ付きフェッチ例
export async function getJson(url: string, ttl = 60) {
  const res = await fetch(url, { next: { revalidate: ttl } });
  if (!res.ok) throw new Error('fetch failed');
  return res.json();
}

キャッシュ設計（HTTP/アプリ）

• 静的: public, max-age=31536000, immutable
• 準動的: max-age=60, stale-while-revalidate=300
• 動的: no-store（ただし結果の一部は分割してキャッシュ）

観測とフォールバック

• 重要エンドポイントは成功率/レイテンシ/タイムアウト率を計測し、しきい値を超えればNode Runtimeへフォールバック。
• 例外は構造化してロギング。ユーザーへのフェイルソフト（キャッシュ/既定値）を用意。

まとめ

Edgeは「軽く速く」。前処理・判定・ストリーミング・キャッシュを組み合わせ、Nodeが得意な重処理は委任する分業で最大効果を得られます。