HTTPキャッシュ実践【ETag/SWR/2025年】：速さと一貫性を両立する設計

まず押さえる3層

1. ブラウザキャッシュ 2) CDN/エッジ 3) オリジン

ETagと条件付きGET

// app/api/items/[id]/route.ts
export async function GET(req: Request, { params }: { params: { id: string } }) {
  const item = await db.find(params.id);
  const etag = `W/"${item.version}"`;
  if (req.headers.get('if-none-match') === etag) return new Response(null, { status: 304 });
  return Response.json(item, { headers: { ETag: etag, 'Cache-Control': 'max-age=60, stale-while-revalidate=300' } });
}

SWRの考え方（短期新鮮＋裏で更新）

Cache-Control: max-age=60, stale-while-revalidate=300

60秒までは新鮮、期限切れでも5分はキャッシュを返しつつ裏で更新。

静的/準動的/動的の切り分け

• 静的: immutable 長期キャッシュ
• 準動的: max-age + swr で高速化
• 動的: no-store だが一部断片はキャッシュ化（段階的キャッシュ）

段階的キャッシュ（HTMLとデータ）

• HTMLは短期キャッシュ、データAPIをSWRで分離
• OGP/メタなど変化の少ない要素は長期化

CDNとの連携

• パス/ヘッダでキャッシュキーを明確化
• 認証付きはパブリックキャッシュ不可（Cookieバインドor鍵付き）

まとめ

「ETag＋SWR＋段階的キャッシュ」を組み合わせれば、整合性を維持しつつ体感速度を大きく改善できます。