by reu · 2026/5/15

Next.js 16 個人ブログを爆速化した話 — 記事詳細を 3.8s → 73ms に縮めるまで TL;DR - 遅くて詰まってるポイント、人間が原因特定するのがまだ早い気がする - Next.js 16 + Vercel + Prisma で動かしてるこのブログ（自分自身）を多段で速度改善した - 主犯は 「ISR を宣言したのに効いてなかった」 こと → で復活 - 記事詳細: 3.8s → 73ms（〜40倍） / weather API: 427ms → 49ms（〜9倍） などの効果 - Next.js 16 で のシグネチャが変わってる地味な落とし穴も 環境 - Next.js 16.2.3（Turbopack） - Vercel ホスティング - Prisma + Supabase（DB + Auth + Storage） - TypeScript / Tailwind CSS やったこと総覧 | | 打ち手 | 効果 | |---|---|---| | 1 | PostList のクエリを でキャッシュ | トップで毎リクエスト DB を叩かなくなった | | 2 | を で dedupe | リクエスト内の DB 往復 2 回 → 1 回 | | 3 | を で永続キャッシュ | の HTTP 往復スキップ | | 4 | 投稿系 API で / | キャッシュ無効化を明示化 | | 5 | EditButton の → 切り替え | の 812ms が消滅 | | 6 | 天気 fetch を で遅延 | 描画ブロック解消（装飾なので後で十分） | | 7 | に 追加 | 「戻る」押下時の RSC 再取得 1.9s が消滅 | | 8 | Yusei Magic を | woff2 preload 37 個 → 7 個 | | 9 | で全記事 SSG | 記事詳細 3.8s → 73ms | | 10 | を Edge Runtime + | 427ms → 49ms | 以下、特に学びが大きかったものをピックアップして書く。 --- ① データ取得をキャッシュする（ + ） トップページの「最近の戯言」セクションがアクセスごとに Prisma を叩いていた。 で 1 日キャッシュ + tag で明示破棄できる構成にした。 更新時は POST/PUT のエンドポイントで を呼んで明示破棄する。 > ⚠️ Next.js 16 から の 第二引数が必須になっている。 は cacheLife プロファイル名で、永続キャッシュ相当の挙動。これに気付かずビルドが落ちた。 > > また の と の本体で同じ slug の を 2 回叩いていたので、 で dedupe した。 は 同一リクエスト内 で同じ引数なら結果を再利用する仕組み。ISR が効いていればそもそも DB は触らないが、キャッシュ再生成時にだけ効く保険として入れた。 --- ② Markdown レンダリング結果を永続キャッシュ は内部で を使い、記事内画像の実サイズをリモートから HTTP で取得していた。これが画像枚数分走るので結構重い。 で をキーに永続キャッシュ化した。 がキーに含まれるので、記事更新時は自動で別キーになり再計算される。古いキーのキャッシュは Next.js 側で放置される。 --- ③ EditButton の 812ms 削減 ブラウザの DevTools で Network を見ていたら、記事ページに飛ぶたびに への fetch が 812ms かかっていた。犯人はこれ。 は Supabase の認証サーバーに毎回問い合わせるので遅い。一方 は localStorage / Cookie から既存セッションを読むだけでほぼ 0ms。 このボタンの用途は「ログイン中なら編集ボタンを表示する」だけ。実際に編集を実行する API ルートでは別途 で検証されるので、UI 表示判定としては で十分。 ネットワークタブから のリクエストごと消えた。 --- ④ 装飾用 API は描画後でいい（） 背景の空の色を天気で変える装飾があり、 を即時 fetch していた。ただこれは装飾なので、メイン描画後で十分。 でブラウザのアイドル時間に遅延した。 は Safari の古いバージョンで未対応なので、 でフォールバックしている。 --- ⑤ 「戻る」ボタンで 1.9 秒 — の落とし穴 記事詳細から「戻る」を押すと、トップに戻るのに毎回 1.9 秒かかっていた。DevTools で見ると という URL に GET が飛んでいる。 これは React Server Components の payload を取得する Next.js の挙動。本来は Router Cache から即復元すべきところ、毎回再取得していた。 原因は Next.js 16 の Router Cache のデフォルト設定。 | ページ種別 | デフォルトの staleTimes | |---|---| | Static | 5 分 | | Dynamic | 0 秒 ← 即 expire | このサイトのトップは AboutMe が を使ってる関係で Dynamic 扱いになっており、Router Cache の保持時間が 0 秒だった。 で明示的に拡張する。 これで戻るボタン押下時に Router Cache から即復元されるようになり、 の再取得が消えた。 --- ⑥ フォントの preload が 37 個もあった ネットワークタブで を見ると 37 個 の preload が走っていた。 を で使っていたが、日本語フォントの Google Fonts CSS は で大量の segment に分割されており、Next.js がそれらを全て自動 preload していた。 にすることで、revalidate = 86400curl -I cache-control: private, no-cache, no-store, max-age=0, must-revalidate x-vercel-cache: MISS cf-cache-status: DYNAMIC MISSage: 0await paramsforce-staticts // やってしまった export const dynamic = "force-static"; export const revalidate = 86400; [slug]generateStaticParamsforce-staticforce-staticgenerateStaticParamsgenerateStaticParamsforce-staticgenerateStaticParamsts // app/posts/[slug]/page.tsx import { getAllPublishedSlugs } from "@/lib/queries"; export const revalidate = 86400; export async function generateStaticParams() { const slugs = await getAllPublishedSlugs(); return slugs.map((slug) => ({ slug })); } ts // lib/queries.ts export async function getAllPublishedSlugs(): Promise { const posts = await prisma.post.findMany({ where: { published: true }, select: { slug: true }, }); return posts.map(({ slug }) => slug); } generateStaticParamsdynamicParams = truecurl -I [1] TTFB=1.071s x-vercel-cache: HIT age: 0 [2] TTFB=0.341s x-vercel-cache: HIT age: 2 [3] TTFB=0.056s x-vercel-cache: HIT age: 3 x-vercel-cache/api/weatheripapi.co/json//api/weather?lat=...&lon=...x-vercel-ip-latitudex-vercel-ip-longitudets // app/api/weather/route.ts export const runtime = "edge"; export async function GET(request: NextRequest) { const headerLat = request.headers.get("x-vercel-ip-latitude"); const headerLon = request.headers.get("x-vercel-ip-longitude"); const lat = parseFloat(headerLat ?? ""); const lon = parseFloat(headerLon ?? ""); // 0.1度（約 11km）に丸めて CDN キャッシュキーを共有しやすくする const finalLat = Number.isFinite(lat) ? Math.round(lat 10) / 10 : 35.6812; const finalLon = Number.isFinite(lon) ? Math.round(lon 10) / 10 : 139.7671; const res = await fetch( , { next: { revalidate: 600 } } ); // ... return NextResponse.json(data, { headers: { "Cache-Control": "public, max-age=600, s-maxage=600, stale-while-revalidate=3600", }, }); } runtime = "edge"/api/weatheripapi.co [1] TTFB=1.061s age: 0 (Edge cold start) [2] TTFB=0.219s age: 0 [3] TTFB=0.049s age: 1 ← 49ms! /api/weatherrevalidatex-vercel-cache: MISSforce-staticgenerateStaticParamsrevalidateTag"max"getSessiongetUserrequestIdleCallbackunstable_cache'use cache'probe-image-size` の結果を DB に永続化する（投稿時のみ実行する設計） 参考リンク - Next.js: generateStaticParams - Next.js: staleTimes - Next.js: revalidateTag - Vercel: Edge Functions geolocation headers - Supabase: getSession vs getUser