Vue: Pending prefetch blocks navigation until deferred props resolve

Open
  • Is something wrong?
#832 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
32/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
frontend

Research direction

Start at packages/void/src/pages/navigation-engine.ts around lines 740-744, where the navigation waits on an in-flight prefetch before committing, and read how prefetch results are stored and later reused. Compare that path with the non-prefetch navigation path that renders core content and streams deferred props. Use the reproduction branch linked in the issue (prefetch-blocks-deferred-navigation) to observe both behaviours. Done means navigation to a deferred route no longer waits on a pending prefetch, while fully completed prefetches remain reusable.

Written by the indexing model from the issue text.

Description

When a route uses defer(), clicking its link while a prefetch is still running delays the entire navigation until the deferred data resolves.
Without prefetch, the same route renders its core content immediately and streams the secondary data afterward.

Reproduced with [email protected] and @void/[email protected]. Not tested with 1.9.x but the relevant code is still in it so it should be the same.

Minimal reproduction

See https://github.com/TheAlexLichter/void-reproduction/tree/prefetch-blocks-deferred-navigation

Actual behavior

With the prefetch still pending, the current page remains visible until the deferred operation finishes. The next page's heading and loading state never get a chance to appear first.

With prefetch disabled, the heading and loading state appear before the deferred result.

Expected behavior

Navigation to a route with deferred props should be able to show its core content without waiting for secondary data, including when prefetching has already started. Fully completed prefetches should remain reusable.

Could Void either support consuming an in-flight prefetch progressively, or provide an option to reuse only completed prefetches and otherwise fall back to streamed navigation?

Current workaround

I disable automatic prefetch for routes with deferred sections. This restores progressive navigation, but means giving up automatic prefetching for those routes.

Dominant language
TypeScript
Stars
684
Forks
83
Avg merge
15h 22m
Merged PRs (30d)
219

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

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.

More from voidzero-dev/void

All issues in voidzero-dev/void

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.