Cache busting is the technique of forcing browsers to load fresh assets instead of serving stale versions from cache, implemented in Next.js via content hashing for static files and revalidation strategies for pages.
Cache busting is a technique used to force browsers to load the most recent version of a file from the server, rather than serving a potentially outdated version from the local cache. In Next.js, this is handled automatically for most assets through content hashing, while dynamic content freshness is managed through revalidation strategies like ISR.
Next.js automatically implements cache busting for static assets like JavaScript, CSS, and images. These files are served from /_next/static/ with content hashes embedded in their filenames[citation:3]. For example, a file named main-abc123.js changes to main-def456.js whenever its content changes. These assets receive a Cache-Control header of public, max-age=31536000, immutable, meaning they can be cached indefinitely by the browser[citation:3]. When the file content changes, the filename changes, forcing the browser to download the new version.
For custom scripts in the public folder that don't receive automatic hashing, you can implement manual cache busting using query parameters. The official Next.js discussion recommends moving such scripts to be imported directly in your application to benefit from built-in optimizations[citation:10]. Alternatively, you can append a version parameter or timestamp: /js/custom.js?v=1.2.0.
For page content, Next.js uses Incremental Static Regeneration (ISR) to manage cache freshness. When you set export const revalidate = 3600 in a page, Next.js adds Cache-Control: s-maxage=3600, stale-while-revalidate=86400 headers[citation:3]. This instructs CDNs to cache the page for the specified time, but the stale-while-revalidate directive allows serving stale content while regenerating in the background[citation:2]. For immediate updates, use on-demand revalidation with revalidateTag or revalidatePath[citation:2].
Static assets (/_next/static/): Content-hashed filenames with 1-year immutable cache. Automatic cache busting when content changes[citation:3].
Static pages (no revalidate): s-maxage=31536000 (one year). Cache remains until manual invalidation or redeploy[citation:3].
ISR pages (with revalidate): s-maxage={revalidate} with stale-while-revalidate. Time-based background regeneration[citation:2][citation:3].
Dynamic pages (force-dynamic): private, no-cache, no-store. Never cached[citation:3].
CDN limitation: On-demand revalidation (revalidateTag/revalidatePath) invalidates Next.js cache but not CDN cache. CDN purge required for immediate propagation[citation:3].
0-2 years experience
2-5 years experience
5-8 years experience
8+ years experience
