App Shell Upgrading

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 App Shell stream in, then click it again or refresh the page to see the upgraded static 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

• App Shell Upgrading requires experimental.appShells in next.config.ts. Combine 'use cache' with generateStaticParams and a loading.tsx to get a self-upgrading shell for unknown slugs.