by shigemk2

当面は技術的なことしか書かない

Edge Middleware & キャッシュ メモ

web

Edge Middlewareとは

リクエストがオリジンサーバーに到達する前に、CDNのエッジ（世界各地の拠点）で実行されるコード。

ユースケース

  • 認証・認可チェック（ログインしていなければリダイレクト）
  • A/Bテスト（ユーザーを異なるバージョンに振り分け）
  • 地域に応じたコンテンツ切り替え
  • Bot検出・レート制限
  • リクエスト/レスポンスヘッダーの書き換え
  • URLリライト・リダイレクト

メリット

  • オリジンサーバーに負荷をかけずに処理できる
  • ユーザーに近い場所で実行されるため低レイテンシ
  • グローバルに分散した処理が可能

コード例（Next.js / Vercel）

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

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token')
  
  // 未認証ならログインページへリダイレクト
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  
  return NextResponse.next()
}

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

キャッシュ機構とは

一度生成したコンテンツを保存し、同じリクエストに対して再生成せずに返す仕組み。

キャッシュの種類

種類 説明 例
CDNキャッシュ エッジサーバーに静的コンテンツを配置 画像、CSS、JS
ページキャッシュ 生成済みHTMLをキャッシュ SSG、ISR
データキャッシュ APIレスポンスをキャッシュ fetchの結果
ブラウザキャッシュ ユーザーのブラウザに保存 Cache-Controlヘッダー

ISR（Incremental Static Regeneration）

静的生成のメリットを活かしつつ、バックグラウンドで定期的に再生成する仕組み。

// Next.js の例
export async function getStaticProps() {
  const data = await fetchData()
  return {
    props: { data },
    revalidate: 60 // 60秒ごとに再生成
  }
}

Cache-Controlヘッダー

Cache-Control: public, max-age=3600, stale-while-revalidate=86400
ディレクティブ 意味
public CDNでキャッシュ可能
max-age=3600 3600秒間キャッシュを使用
stale-while-revalidate=86400 古いキャッシュを返しつつバックグラウンドで更新
private ブラウザのみキャッシュ可（CDN不可）
no-store キャッシュしない

参考リンク