---
title: "Edge caching with Cloudflare + Next.js, the right way"
slug: "edge-caching-nextjs"
category: "headless"
lang: "en"
date: "2026-05-21"
excerpt: "Caching at the edge is the cheapest performance win there is, and the easiest to get subtly wrong. Here's a setup that stays fast and never serves stale pages."
featured: false
tags: ["Headless", "Performance", "Infrastructure"]
author:
  name: "Adrien Roy"
  role: "Technical SEO, SEO Insight"
  initials: "AR"
  bio: "Adrien builds the infrastructure that keeps decoupled sites fast and crawlable."
  twitter: "#"
  linkedin: "#"
thumb:
  illust: "network"
  tint: "mint"
seo:
  metaTitle: "Edge caching with Cloudflare + Next.js | SEO Insight"
  metaDescription: "A practical edge-caching setup for Next.js behind Cloudflare that stays fast without serving stale content."
  keywords: ["edge caching", "Cloudflare", "Next.js", "ISR", "headless"]
---

The fastest response is the one you never compute. Edge caching puts your rendered HTML a few milliseconds from every visitor, and from Googlebot. The trick is invalidating it correctly.

## Cache the HTML, revalidate on change

Use stale-while-revalidate so visitors always get an instant response while the edge refreshes in the background.

```ts
return new Response(html, {
  headers: {
    "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=86400",
  },
});
```

## Purge on publish, not on a timer

Tag your cache entries and purge by tag when content changes. Time-based expiry alone means either stale pages or wasted compute.

<Callout
  title="Running a decoupled stack?"
  href="/en/services/cms-optimization"
  cta="CMS optimization"
>
  We tune caching, rendering and indexing on any CMS so your headless front end
  stays fast and crawlable.
</Callout>

> Cache aggressively, invalidate precisely. Everything good about the edge depends on getting the second half right.