[Solved] SEO using routerWithQueryClient()
Hi all, using Tanstack Start for a small project and wanted to know if a situation is possible
Considerations:
- I'm using
routerWithQueryClient() in the project
- I can currently go to a dynamic route page with skeleton loader and then data loads
Requirement:
For SEO purposes I wish to add tags in the head part of createFileRoute. The problem is when I do any async work in the head the application will wait for data load before the page is shown (basically app doesn't feel snappy, nor does any loader skeleton shows).
Summarizing above: Is it possible to add seo tags in the createFileRoute while still allowing deferred data loading?
Thanks!
[code example attatched]
9 Replies
national-gold•3mo ago
Firstly you should use the new ssr router integration package rather than the routerWithQueryClient
also Im not sure if it can work with your usecase but you could use
useSuspenseQuery and prefetch the query on the loader (which is not async) and it will stream the data down to the clientevident-indigo•3mo ago
this sounds like you want to stream meta data to the client?
magic-amberOP•3mo ago
I guess that is one way to put it. The goal is getting the document head to be dynamically generated (for SEO purposes) while still allowing the user to see the skeleton loader/fallback when heading to the route
Works IF navigating from client side (Example: Data takes 5 seconds to load, I see skeleton for 5 seconds). SEO part does work now
The only case now where it's not working is on a page reload. No skeletons/fallback, the page load takes 5 seconds
@Mofo thanks for the suggestion, I've moved to the SSR integration. So far I've got this code
evident-indigo•3mo ago
would say thats the only way to put it. you want head not to block the whole page , so it should stream its content after the page was sent
magic-amberOP•3mo ago
Yup, that is it
EDIT: Would that approach work with webcawlers?
evident-indigo•3mo ago
for crawlers you would need to disable streaming
magic-amberOP•3mo ago
I see, is there any resource/documentation where I can learn to distinguish a crawler from a user?
evident-indigo•3mo ago
isBot is a widely used approach
just to be clear, streaming meta is not yet supported
magic-amberOP•3mo ago
Oh, thanks for helping out Manuel
Appreciated 🙌