how to do extra data fetching for head metadata without blocking loader?

what should i do for (rare) cases where there is data fetching that a route's

head

head

needs, but the component does not require the data. by putting this fetch in the loader, it will block showing page's UI until this extra data.

i think it would be helpful if

head

head

could be

async

async

, but there's probably some complications i am overlooking in directly making the change. if done, the function could still use loader data, but it could also fetch its own extra data. maybe some other mechanism could be added for less critical meta tags (when doing a soft navigation, most of the seo stuff isn't as big of a deal, mostly care about

title

title

, but on a full page load, it needs everything)

the case i have is one on a work app that involves having a bunch of stuff for SEO and open graph data, but only needs a very small subset of the data. the subset that is needed is already fully ready in TanStack Query from the homepage, but the extra data for SEO causes the loader to take time at all. so the result if

intent

intent

prefetching is too slow, is that clicking will wait up to

defaultPendingMs

defaultPendingMs

until the page actually renders, even though it should've been instant.

the current workaround is having the pending component be a similar component, using the non-suspense

useQuery

useQuery

to show content as soon as the required fetch is complete. but it's not very satisfying to use the pending component for something other than pending state.

TanStack•3mo ago•

20 replies

sad-indigo

how to do extra data fetching for head metadata without blocking loader?

what should i do for (rare) cases where there is data fetching that a route's

head

head

needs, but the component does not require the data. by putting this fetch in the loader, it will block showing page's UI until this extra data.

i think it would be helpful if

head

head

could be

async

async

title

title

intent

intent

prefetching is too slow, is that clicking will wait up to

defaultPendingMs

defaultPendingMs

until the page actually renders, even though it should've been instant.

the current workaround is having the pending component be a similar component, using the non-suspense

useQuery

useQuery

to show content as soon as the required fetch is complete. but it's not very satisfying to use the pending component for something other than pending state.

how to do extra data fetching for head metadata without blocking loader?

Similar Threads

how to do extra data fetching for head metadata without blocking loader?

Similar Threads

Similar Threads

Similar Threads