Preload whole content (not just prefetch)

[toitzi]

I have a nextjs 16 app with a page which displays a table.
The data uses the new "use cache" function to load the data from an external database server. All works just fine, data is fetched, cached on subsquent requests. My problem is i have some "hot pages" i know will be opend in my app > 90%, i also have some cases where when i user hovers a link, i know for a very high certainy that the link will be clicked. In those cases i want to preload the whole page (including the data). Using prefetch for links (enabled by default) only loads the Layout to first loading boundary (which is documented and what i would expect and what is fine in most cases). However in some cases like this one i want to avoid showing the loading.tsx and preload the WHOLE page in advance. I have not found a way to do that, is there a way to do this in NextJS (because it is possibe with for example Tanstack Query) and would imho improve user experience for those cases, since the data is prefetched early enough an usually already available when the user clicks the link. Using prefetching with tanstack query avoids the loading.tsx flash and therefore the "second layout shift" that would happen from it, but i would like to remove tanstack query from my project and use nextjs functionality.

I tried adding preloading to my page.tsx (server side) and also tried to prefetch manually using router.prefetch (or both approaches at the same time) but no matter what, the loading.tsx is always flashed it never preloads the whole page - only to the closest loading boundary.

Is this possible? Can this be archived somehow? Thanks in advance.

p.s this might relate to #58261 but im not 100% sure.

[icyJoseph]

Could you try prefetch={true} on Link?

true: The full route will be prefetched for both static and dynamic routes.

[toitzi]

Tried that as well in all the combinations above, does not change the outcome (This is the default behaviour for links on production builds anyway)

[icyJoseph]

For App Router, the default is null - (or "auto")

next.js/packages/next/src/client/link.tsx

Lines 75 to 85 in 90bc934

	* In App Router:
	* - "auto", null, undefined (default): For statically generated pages, this will prefetch the full React Server Component data. For dynamic pages, this will prefetch up to the nearest route segment with a [`loading.js`](https://nextjs.org/docs/app/api-reference/file-conventions/loading) file. If there is no loading file, it will not fetch the full tree to avoid fetching too much data.
	* - `true`: This will prefetch the full React Server Component data for all route segments, regardless of whether they contain a segment with `loading.js`.
	* - `false`: This will not prefetch any data, even on hover.
	*
	* In Pages Router:
	* - `true` (default): The full route & its data will be prefetched.
	* - `false`: Prefetching will not happen when entering the viewport, but will still happen on hover.
	* @defaultValue `true` (pages router) or `null` (app router)
	*/
	prefetch?: boolean | 'auto' | null | 'unstable_forceStale'

• https://nextjs.org/docs/app/api-reference/components/link#prefetch

Though this code comment:

"auto", null, undefined (default): For statically generated pages, this will prefetch the full React Server Component data. For dynamic pages, this will prefetch up to the nearest route segment with a loading.js file. If there is no loading file, it will not fetch the full tree to avoid fetching too much data.

Explains what's happening here I think. I'll ask around a bit more.