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}.1async function ContentAfterPrefetch({ productId, example }) {2await prefetch();3const sessionId = (await cookies()).get('session-id')?.value ?? 'guest';4return (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}1516async function ContentAfterNavigation({ productId, sessionId }) {17await navigation();18const products = await getSessionRecommendations(productId, sessionId);19return <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.
<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.unstable_prefetch() and unstable_navigation() APIs.
