How to correctly set meta tags on server before send to browser?

[JohnCido]

Currently I'm using createAsync and cache to load data and use the data to populate meta tags. But the problem now is that some meta tags only got modified once the page is fully loaded on the server. By inspecting the original HTML source, I can confirm this behavior. Any possible solutions? Thanks.

[doeixd]

Are you using ssr: true in your app.config.ts ?

Could you show an example of what you're trying to do?

[JohnCido]

I'm using ssr:true, but it does not work.

I wrote a cutom MetaProvider since the SolidRouter one produces duplicate meta tags. Like the following:

export const MetaContext = createContext<Setter<Partial<Metas>>>()

const [metas, setMetas] = createSignal<Partial<Metas>>({})

createEffect(() => {
  globalThis.document.title = metas().title ?? props.default.title
})

return (
  <MetaContext.Provider value={setMetas}>{props.children}</MetaContext.Provider>

  <For each={Object.entries(metas())}>
    {([name, content]) => {
      const realContent = createMemo(() => content ?? props.default[name as keyof Metas])
      return (
        <Show when={realContent().length > 0}>
          <Meta name={name} content={realContent()} />
        </Show>
      )
    }}
  </For>
)

And in my app.tsx:

export default function App() {
  return (
    <Router
      root={props => (
        <SolidMetaProvider>
          <MetaProvider
            default={{
              description: 'Default',
            }}
          >
            <Suspense>
              {props.children}
            </Suspense>
          </MetaProvider>
        </SolidMetaProvider>
      )}
    >
...

I created a custom Meta component:

export const Meta: Component<{
  name: keyof Metas
  content?: string
}> = props => {
  const setMetas = useMetaContext()

  createEffect(() => {
    setMetas(m => ({
      ...m,
      [props.name]: props.content,
    }))
  })

  onCleanup(() =>
    setMetas(m => ({
      ...m,
      [props.name]: undefined,
    })),
  )

  return <></>
}

And use my custom Meta in a exmaple page [id].tsx:

export default function ExamplePage(props: RouteSectionProps) {
  const id = props.params[PARAM_NAME_ID]
  const data = createAsync(() => getData())

  return (
    <>
      <Meta name='description' content='Exmaple' />

      ...
    </>
  )
}

And this is my app.config.ts:

export default defineConfig({
  ssr: true,
  solid: {
    ssr: true,
  },
...

What I want to achive is in the initial document request when the web page is loaded, it should include the following meta tag in the head:

<meta name="description" content="Exmaple" />

But instead I still see the following:

<meta name="description" content="Default" />

Since is important since Open Graph depends on this. Many website's OG crawler does not wait for JavaScript execution and only parse original server reply.

[droplab]

@JohnCido I'm having the same issue, did you ever figure this out?

[ryansolid]

Solid Meta will render on the server but you might need to hold the stream on async data. You can do this either with deferStream option on individual resources or switching to async mode when rendering. It's an option passed to createHandler