Server-Side Rendering Caching Headers

By default, Next.js will cache as much as possible to improve performance and reduce cost. This means routes are statically rendered and data requests are cached unless you opt out.

This example uses the revalidate route segment config option to override the route segment defaults.

Calling the Index Page (/) within the specified timeframe (e.g., 10 seconds) will return the cached Page (Full Route Cache in this example).

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example ssr-caching ssr-caching-app

yarn create next-app --example ssr-caching ssr-caching-app

pnpm create next-app --example ssr-caching ssr-caching-app

Deploy it to the cloud with Vercel (Documentation).