T
TanStack•6mo ago
other-emerald

Document Meta for Streaming SSR

Hey friends! I have a page where I’m returning a promise from the loader and handle it with <Await>, but that page’s meta depends on the promise data. I can’t use the promise in the “head” property of the route because it can’t be async. The Document Head Management page for Start tells me that it should be rendered in the <head> which is in the __root, but is it safe to be used in a page inside the <Await> component? Or just in general, is there a proper way to handle the document meta when returning promises?
Document Head Management | TanStack Router React Docs
Document head management is the process of managing the head, title, meta, link, and script tags of a document and TanStack Router provides a robust way to manage the document head for full-stack appl...
8 Replies
foreign-sapphire
foreign-sapphire•6mo ago
what do you want to put into meta here after the promise resolved?
other-emerald
other-emeraldOP•6mo ago
the content's title, description, author, OG image. it's a blog page so the blog post details. I guess that's deemed important so I should await it in the loader but if I do that, I can't have a loading component right? I just re-read the doc and I realized the HeadContent is not a component that's used to "set" the meta, but to render the already set meta (and styles and scripts) I didn't pay too much attention and thought it's a react helmet type of component maybe it could offer a prop to override the existing meta with new data? that would be cool 
<HeadContent
   meta={(existing) => [
      ...existing,
      { title: data.title },
      { name: 'description', content: data.description }
   ]}
/>
<HeadContent
   meta={(existing) => [
      ...existing,
      { title: data.title },
      { name: 'description', content: data.description }
   ]}
/>
SEO should remain intact since it's streaming and it's all part of the document request at the end
foreign-sapphire
foreign-sapphire•6mo ago
no you would not see the loading component. where would you get the data from in e.g root?
other-emerald
other-emeraldOP•6mo ago
in the route itself so wait, if I await the promise in the loader how can I define the loading component?
foreign-sapphire
foreign-sapphire•6mo ago
why would you need a loading component? the page would not show up until all loaders resolve
other-emerald
other-emeraldOP•6mo ago
I wanted to show something on the screen while I’m loading the data on the server. The navigation would also “seem” faster coming from a different page. That’s why we do Streaming SSR right?
foreign-sapphire
foreign-sapphire•6mo ago
yeah but usually you don't stream meta data as those should be contained in the initial html for full seo
other-emerald
other-emeraldOP•6mo ago
That makes sense Okay thanks @Manuel Schiller

Did you find this page helpful?