vercel / vercel/next.js

Docs: unclear behaviour of useRouter().prefetch() with static vs dynamic rendering

Open
#62,692 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

What is the improvement or update you wish to see?

Current document does not explain clearly how useRouter() prefetch behaves. For the prefetch with link, we have clarity on 3 possible scenarios / options:

null (default): Prefetch behavior depends on whether the route is static or dynamic. For static routes, the full route will be prefetched (including all its data). For dynamic routes, the partial route down to the nearest segment with a loading.js boundary will be prefetched.
true: The full route will be prefetched for both static and dynamic routes.
false: Prefetching will never happen both on entering the viewport and on hover.

It would be good to have the same explanation or, even better, flexibility, for the useRouter() prefetch. In addition, there is no clarity on how it handles parallel routing.

Is there any context that might help us understand?

E.g. if we want to prefetch the page following a form submission, and the subsequent page contains various dynamic elements, loading fallbacks and/or parallel routes, it is hard to achieve good instant page change without a clear understand of the useRouter().prefetch() behaviour.

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Linking and Navigating documentation page and the useRouter().prefetch() entry point. Compare its behavior with the documented Link prefetch cases, including static and dynamic routes, loading boundaries, and parallel routes. Done means the page clearly describes these cases and explains how a form submission can prefetch the next page.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, react
Domain
documentation, web-dev
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.