From 25e397bdbb5b584392bb3e76a444c68d766263ec Mon Sep 17 00:00:00 2001 From: Zack Tanner Date: Wed, 3 Apr 2024 11:09:01 -0700 Subject: [PATCH] docs: fix prefetching information --- .../01-routing/03-linking-and-navigating.mdx | 7 ++----- .../01-building-your-application/04-caching/index.mdx | 10 ++++------ 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx b/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx index 1ca637f499f71..67d48e5065ffd 100644 --- a/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx +++ b/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx @@ -366,12 +366,9 @@ There are two ways routes are prefetched in Next.js: - **`` component**: Routes are automatically prefetched as they become visible in the user's viewport. Prefetching happens when the page first loads or when it comes into view through scrolling. - **`router.prefetch()`**: The `useRouter` hook can be used to prefetch routes programmatically. -The``'s prefetching behavior is different for static and dynamic routes: +The ``'s default prefetching behavior (i.e. when the `prefetch` prop is left unspecified or set to `null`) is different depending on your usage of [`loading.js`](/docs/app/api-reference/file-conventions/loading). Only the shared layout, down the rendered "tree" of components until the first `loading.js` file, is prefetched and cached for `30s`. This reduces the cost of fetching an entire dynamic route, and it means you can show an [instant loading state](/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states) for better visual feedback to users. -- [**Static Routes**](/docs/app/building-your-application/rendering/server-components#static-rendering-default): `prefetch` defaults to `true`. The entire route is prefetched and cached. -- [**Dynamic Routes**](/docs/app/building-your-application/rendering/server-components#dynamic-rendering): `prefetch` default to automatic. Only the shared layout, down the rendered "tree" of components until the first `loading.js` file, is prefetched and cached for `30s`. This reduces the cost of fetching an entire dynamic route, and it means you can show an [instant loading state](/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states) for better visual feedback to users. - -You can disable prefetching by setting the `prefetch` prop to `false`. +You can disable prefetching by setting the `prefetch` prop to `false`. Alternatively, you can prefetch the full page data beyond the loading boundaries by setting the `prefetch` prop to `true`. See the [`` API reference](/docs/app/api-reference/components/link) for more information. diff --git a/docs/02-app/01-building-your-application/04-caching/index.mdx b/docs/02-app/01-building-your-application/04-caching/index.mdx index e17a364bcccda..347d06f008c74 100644 --- a/docs/02-app/01-building-your-application/04-caching/index.mdx +++ b/docs/02-app/01-building-your-application/04-caching/index.mdx @@ -363,13 +363,11 @@ This results in an improved navigation experience for the user: The cache is stored in the browser's temporary memory. Two factors determine how long the router cache lasts: - **Session**: The cache persists across navigation. However, it's cleared on page refresh. -- **Automatic Invalidation Period**: The cache of an individual segment is automatically invalidated after a specific time. The duration depends on whether the route is [statically](/docs/app/building-your-application/rendering/server-components#static-rendering-default) or [dynamically](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) rendered: - - **Dynamically Rendered**: 30 seconds - - **Statically Rendered**: 5 minutes +- **Automatic Invalidation Period**: The cache of an individual segment is automatically invalidated after a specific time. The duration depends on how the resource was [prefetched](/docs/app/api-reference/components/link#prefetch): + - **Default Prefetching** (`prefetch={null}` or unspecified): 30 seconds + - **Full Prefetching**: (`prefetch={true}` or `router.prefetch`): 5 minutes -While a page refresh will clear **all** cached segments, the automatic invalidation period only affects the individual segment from the time it was last accessed or created. - -By adding `prefetch={true}` or calling `router.prefetch` for a dynamically rendered route, you can opt into caching for 5 minutes. +While a page refresh will clear **all** cached segments, the automatic invalidation period only affects the individual segment from the time it was prefetched. ### Invalidation