Partial Fallbacks

1
'use cache';
2

3
export async function generateStaticParams() {
4
  return [{ slug: '1' }, { slug: '2' }, { slug: '3' }];
5
}
6

7
export default async function Page({ params }) {
8
  const { slug } = await params;
9
  return <ProductDetail slug={slug} />;
10
}

Demo

• A product catalog with 9 products. Only 3 are in generateStaticParams.
• Build-time products (1–3) load instantly with no fallback.
• Request-time products (4–9) get a unique slug suffix on page load (persisted in session). Click one to see the streaming fallback, then click it again or refresh the page to see the cached result. Use the Regenerate button to get a new suffix and test with fresh slugs.
• An artificial 2 second delay makes the difference more noticeable.

Notes

• Partial fallbacks are a built-in behavior of cacheComponents — there is no separate flag. Combine 'use cache' with generateStaticParams and a loading.tsx to get the streaming shell for unknown slugs.