Demo

Navigation stages

unstable_prefetch() removes subsequent content from the shared App Shell. A link with prefetch={true} can put it back in a per-link prefetch.
unstable_navigation() removes subsequent content from both prefetch stages, even when the link uses prefetch={true}.

app/navigation-stages/_components/staged-product.tsx

1async function ContentAfterPrefetch({ productId, example }) {
2  await prefetch();
3  const sessionId = (await cookies()).get('session-id')?.value ?? 'guest';
4  return (
5    <>
6      <Suspense fallback={<RecommendationsSkeleton />}>
7        <MoreProducts sessionId={sessionId} example={example} />
8      </Suspense>
9      <Suspense fallback={<RecommendationsSkeleton />}>
10        <ContentAfterNavigation productId={productId} sessionId={sessionId} />
11      </Suspense>
12    </>
13  );
14}
15
16async function ContentAfterNavigation({ productId, sessionId }) {
17  await navigation();
18  const products = await getSessionRecommendations(productId, sessionId);
19  return <Recommendations products={products} />;
20}

Both APIs run outside the cached data functions. MoreProducts depends on a cookie, not URL data, and uses a private cache. The recommendations after the navigation gate are cached too.

Demo

<Link> includes only the product. More products and recommendations stream after navigation.
<Link prefetch={true}> includes the product and more products in the prefetch. Recommendations still stream after navigation.
Each data function includes an artificial delay to make the stages visible. Prefetching only runs in production.