Next.js ~Prefetching~

In this section, I gann talk about story about App Router that is enabled to use Cache Components + Partial Prefetching (cacheComponents: true and partialPrefetching: true are set in next.config.ts). New app that is created by create-next-app is enabled to use them by default.

Default action

• Router prefetches each routes of App Shell automatically.
• App Shaell includes static contents and session data from cookies() and headers().
• App Shell is a static shell (HTML + RSC payload) in which the URL-dependent portions have been replaced with a fallback.

In case of <Link prefetch={true}>

• If URL to navigation (searchparamsor dinamic parms)is comfirmed, the root of component tree is re-renderd.
• And then, three prefetches followed are included.
  • A fallback of <Suspense>: Parts that are not cached remains as a fallback, and are streamed when requesting.
  • use cache: private:Runs in server, and is cached in browser.
  • use cache that is passed as a param of runtime value.

Example

If prefetch a link to /search?q=shoes, searchParams is resolved from link of URL, cached result of search() is prepared before click. Browser re-uses it untill stale time has passed or searchParams has been changed.

Additional Information

• The cached data that is prefetched is treated as fresh data during term of stale.
• Refferencies: Adopting Partial Prefetching / Optimizing prefetching / prefetch refference