Dynamic Routes

When you render a dynamic route like test/[slug] this becomes a dynamic route automatically. This means you will never see a cache HIT.

You can do export dynamic="force-static" if you want the pages to be cached after they are rendered for the first time. For example if you have blog pages or product pages. You want them to be cached after first render.

If you want all of those pages being cached already at build time you can use

export async function generateStaticParams() {
  const pages = await getPages();
  return pages.map(p => ({ slug: p.slug}))
}

This way all the generated pages are being static and cached as well. But this will increase the build times for larger sites significantly.

When a page is requested that was not generated, by default, it works like "force-static". Meaning the page will be dynamically rendered but then cached.

Page Cache

The page is loaded after a fresh next.js build. You will see the header response:

X-Nextjs-Cache: MISS

This means the page was rendered from scratch. In the backend I see all the requests to fetch the page data. But also I see more requests fetching the page data from pages that are linked on the requested page. Next.js does this so when a user would click the link the other page is already cached as well.

The next request then shows

X-Nextjs-Cache: HIT

And continues to do so if you have not configured any revalidation times.

Now I have a RSC in the rendered tree. It uses fetch to request data. The fetch has a revalidation time.

Now what happens is, that the response header shows

X-Nextjs-Cache: STALE

In the background only the fetch is performed from the RSC within the tree. But not all the other data fetches. Those would only be called again once you revalidate the page e.g. via an API hook.