mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Andrew ClarkandGitHub
bc48ef76ee
The experimental `appShells` flag was added while the feature was being developed. It was not meant to be a public-facing flag. Some of the behavior that was gated behind the `appShells` flag is purely an optimization and can be landed without any gate. There are also some behaviors that we don't want to turn on unless you've opted into the new prefetching model via Partial Prefetching. Arguably these too are internal optimizations, but because they can change the number of requests that are made to the server (e.g. one request for the shell, another for the page data), we will gate these behind Partial Prefetching to minimize the impact on existing applications. The result is that until you opt into Partial Prefetching, you should not see any meaningfully detrimental impact to prefetching costs, regardless of how your app is structured.
64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import { LinkAccordion } from '../../../components/link-accordion'
|
|
|
|
/**
|
|
* Index page for the runtime prefetch vary params test.
|
|
*
|
|
* This tests vary params tracking with runtime prefetching enabled. Unlike
|
|
* static prefetching, runtime prefetching allows dynamic params to be rendered
|
|
* as part of the prefetch (rather than being omitted). This enables testing
|
|
* more specific combinations:
|
|
*
|
|
* - The page renders `category` in the static portion → tracked in varyParams
|
|
* - The page renders `itemId` in the dynamic portion → NOT tracked in varyParams
|
|
*
|
|
* Since `itemId` is only accessed in the dynamic section (inside Suspense after
|
|
* connection()), the page should only vary on `category`, allowing cache reuse
|
|
* across different itemId values.
|
|
*
|
|
* Manual testing:
|
|
* 1. Click checkbox for "phone" — triggers prefetch, page content fetched
|
|
* 2. Click checkbox for "tablet" and "laptop" — cache hits (same category)
|
|
* 3. Navigate to "headphones" — loading state instant, then dynamic content loads
|
|
*/
|
|
export default function RuntimePrefetchIndexPage() {
|
|
return (
|
|
<div id="runtime-prefetch-index">
|
|
<h1>Runtime Prefetch Vary Params Test</h1>
|
|
<p>
|
|
Tests vary params tracking with runtime prefetching. The page renders
|
|
category in the static portion and itemId in the dynamic portion.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<LinkAccordion href="/runtime-prefetch/electronics/phone" prefetch>
|
|
Electronics: Phone
|
|
</LinkAccordion>
|
|
</li>
|
|
<li>
|
|
<LinkAccordion href="/runtime-prefetch/electronics/tablet" prefetch>
|
|
Electronics: Tablet
|
|
</LinkAccordion>
|
|
</li>
|
|
<li>
|
|
<LinkAccordion href="/runtime-prefetch/electronics/laptop" prefetch>
|
|
Electronics: Laptop
|
|
</LinkAccordion>
|
|
</li>
|
|
<li>
|
|
<LinkAccordion
|
|
href="/runtime-prefetch/electronics/headphones"
|
|
prefetch
|
|
>
|
|
Electronics: Headphones
|
|
</LinkAccordion>
|
|
</li>
|
|
<li>
|
|
<LinkAccordion href="/runtime-prefetch/clothing/shirt" prefetch>
|
|
Clothing: Shirt
|
|
</LinkAccordion>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|