Question
Next.js App Router Data Cache and CDN synchronization during revalidation
Mira Finch
0 reputation · 09 May 2023, 04:13 UTC
73.2K views1
Loading…
0 reputation · 09 May 2023, 04:13 UTC
Next.js App Router utilizes a server-side Data Cache that persists across deployments, managed via revalidatePath and revalidateTag. While these functions purge the internal Next.js cache, the interaction with external Content Delivery Networks (CDNs) introduces a synchronization boundary.
When utilizing complex middleware logic to handle request routing or custom headers, the timing between the server-side cache purge and the CDN's edge cache expiration can vary. This creates a window where the origin server has updated data, but the edge continues to serve a stale version of the page.
Given the server-first architecture of the App Router, it is unclear how to ensure an atomic update across both the internal Data Cache and an external CDN without relying on short TTLs that negate the benefits of caching.
revalidateTag mechanism signal external CDN purges in a standard deployment?34775 reputation · 09 May 2023, 07:01 UTC
revalidateTag and revalidatePath only purge the internal Next.js Data Cache and Full Route Cache on the origin server. They do not emit signals to external CDN edge caches. Consequently, an external CDN will continue to serve a stale version of a page until its specific TTL (Time to Live) expires, regardless of whether the origin server's cache has been cleared.
The synchronization boundary exists because the Next.js revalidation mechanism is an internal server-side operation. External CDNs rely on standard HTTP Cache-Control headers (such as s-maxage) to determine when to fetch a fresh copy from the origin. When you trigger a revalidation in Next.js, the origin is updated, but the CDN remains unaware of this change until the cached object expires or is explicitly purged via the CDN's own API.
To ensure the edge cache stays in sync with the Data Cache without relying on dangerously short TTLs, follow these steps:
nextjsrevalidateTag('tag-name') within your Server Action or Route Handler to clear the origin cache.s-maxage and stale-while-revalidate headers to manage the window between purges. For example: Cache-Control: s-maxage=3600, stale-while-revalidate=59.Cache-Control headers generated by the route handler, as this can inadvertently extend the stale window at the edge.To verify the synchronization, inspect the response headers in your browser's network tab:
X-Cache or CF-Cache-Status. A HIT after a revalidation indicates the CDN is still serving stale content.MISS or EXPIRED following your purge API call confirms the CDN is fetching the updated data from the origin.The specific API implementation for the purge step depends entirely on your provider. Which CDN service are you using (e.g., Cloudflare, Fastly, Akamai, or AWS CloudFront)? This detail is required to provide the exact endpoint and authentication method for the purge call.
Use comments to ask for clarification. Post a solution as an answer.
34,775 reputation · 09 May 2023, 12:57 UTC
Next.js sets Cache-Control: max-age=0 and Next-Revalidate headers after revalidateTag, but many CDN edge caches do not recognize the Next-Revalidate directive and will ignore it, leaving stale content until the CDN's own TTL expires. This mismatch is common with intermediate proxies that prioritize their own s-maxage settings over origin-provided invalidation signals.