Reactive head(): update title/meta when async data arrives after non-blocking navigation

[meseven]

Problem

In a SPA using the recommended TanStack Query integration, loaders typically call queryClient.ensureQueryData() without awaiting so navigation stays instant, and components read the data with useSuspenseQuery. In this setup head({ loaderData }) can't produce a dynamic title: loaderData is empty when head() runs, and head() is never re-invoked once the data lands in the cache.

Current options all have drawbacks:

• Await the loader → blocks navigation, defeating the non-blocking pattern.
• useEffect + document.title after Suspense resolves → works, but bypasses HeadContent, and only by relying on the (undocumented) fact that HeadContent won't rewrite an unchanged title.
• React 19 <title> hoisting → conflicts with the <title> that HeadContent renders (duplicate tags, first-in-document wins).

Proposal

First-class support for a two-phase title: a static fallback shown at navigation, replaced when async data resolves. Possible shapes:

1. Re-run head() when an unawaited/deferred promise returned from the loader resolves (Await-aware head), or
2. A supported API for a route component to update its own match's head after data arrives — e.g. a useHead() hook or <RouteHead title={...} /> component that participates in HeadContent's dedupe/override chain.

Related

• How to set html tag title from a route #1056 — long-running thread; every SPA answer there ends in a document.title workaround
• Route head function can still execute before loader function finishes #6221 — head running before the loader finishes (the awaited case)