Caching

This page sets export const revalidate = 10, so its server-rendered HTML is cached per origin and URL for ten seconds.

Rendered at 16:12:29. Reload within 10s and this is unchanged; after 10s it re-renders.

Only for pages identical for every visitor. For per-user or per-query data use cache() with tags and revalidateTag, or a GET action's export const cache, which the server actions card demonstrates end to end.

A mutation evicts the cache on demand. Click below (it calls revalidatePath('/features/caching')), then refresh: the timestamp updates immediately, even inside the 10s window, because the cached HTML was dropped. Without clicking, the refresh serves the cached copy until the window elapses.

revalidate this page

Caching a public/ asset

A file in public/ sits at a stable url, so after a deploy a browser or CDN can keep serving the PREVIOUS bytes until its cache expires. Wrap the url in asset() and it gains a content hash, which the framework then serves immutable for a year:

<link rel="stylesheet" href=${asset('/public/tailwind.css')}>

This app's stylesheet resolves to /public/tailwind.css?v=5701fdcad4a3 (the hash appears in production only, so dev output stays byte-identical). New bytes mean a new url, so a stale copy can never be served.

Mark the thing that FETCHES, not a hint. Wrapping a <link rel="preload"> whose asset is really fetched by an @font-face url() in your CSS would version the hint but not the request, so the preload could never match and the file would download twice.