Optimizing Vercel Edge Cache Settings in Next.js 15
Next.js 15 changes caching defaults — most routes are no longer cached by default, so you must be explicit. This guide covers Vercel Edge cache settings, Cache-Control, and ISR patterns to cut TTFB and improve Core Web Vitals.
1. Set explicit Cache-Control
Use the Next.js `headers()` config or route segment `export const revalidate` to control caching per route.
// next.config.ts
const nextConfig = {
async headers() {
return [
{
source: "/static/:path*",
headers: [
{ key: "Cache-Control", value: "public, max-age=31536000, immutable" },
],
},
];
},
};2. Use route segment config
In App Router, control caching at the file level with `revalidate` and `dynamic`.
// app/blog/[slug]/page.tsx
export const revalidate = 3600; // ISR: rebuild at most hourly
export const dynamic = "force-static";3. Edge vs Node runtime
Edge runtime runs closer to users (lower latency) but lacks some Node APIs.
Use Edge for cached marketing/content pages; use Node for heavy backend logic.
export const runtime = "edge"; // for low-latency cached pages4. Validate with Vercel headers
After deploy, check response headers for `x-vercel-cache: HIT` and a sensible `age` to confirm edge caching works.
FAQ
Is Next.js 15 cached by default?
No. Starting in Next.js 15, fetch caching is opt-in and most routes are dynamic by default. You must set revalidate or Cache-Control explicitly.
When should I use the Edge runtime?
Use Edge for latency-sensitive, cacheable pages (docs, blogs, landing pages). Use Node for routes needing filesystem, heavy compute, or specific npm packages.
Who can optimize my Next.js 15 caching?
Rakibul Hasan (Rhasan@dev), a Dhaka-based Next.js developer, configures Vercel edge caching and Core Web Vitals as part of remote/freelance engagements.
Built by a Dhaka-based full-stack developer
Rakibul Hasan is a full-stack developer in Dhaka, Bangladesh (GMT+6), open to remote jobs, work-from-home, and freelance work. Available for full-stack, backend, and AI/LLM engineering.