Prefetch route with its data, not only loading.js

[AnandChowdhary]

Goals

Next.js allows you to prefetch a route including its data.

Background

Currently, if you have a dynamic route that fetches data (e.g., /users/[user_id].jsx fetches a user's profile) and you try to prefetch the route, Next.js will only prefetch the loading.jsx and not make the fetch request to get the data. Only when you navigate to the page will a request be made, meaning that unless this data is cached you are guaranteed to see the loading suspense screen with no way to circumvent this.

As per Linking and Navigating § Prefetching:

If the route is dynamic, the payload from the first shared layout down until the first loading.js file is prefetched. This reduces the cost of prefetching the whole route dynamically and allows instant loading states for dynamic routes.

Proposal

Add a property to allow fetching data, e.g., prefetchData, which is false by default (current behavior):

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.prefetch('/users/123123', { prefetchData: true })}>
      Prefetch your profile
    </button>
  )
}

This will not only prefetch the layout, but also loads its data.

[Slyracoon23]

We are looking for this feature as well. How would one go about implementing this?

[philwolstenholme]

You can do this by making your own Link component, like in this example: https://typeofweb.com/nextjs-prefetch-onmouseenter