SolidJS•4w ago

How to avoid temporary undefined values in template literals in solid-meta?

In the browser the whole string gets displayed, but the data.name is undefined momentarily until the async data resolves. So the tab title goes from This -> undefined <- is undefined temporarily to This -> hello world <- is undefined temporarily. My intended behavior is that the title should not be displayed at all (or the hostname should be display) until everything in the string literal has resolved. Is there a way to not display the string at all until the data is resolved? Alternatively, is the below code correct - should I be using accessors / derived signals or should be just be using straight string literals (I found this to not be reactive)? I tried wrapping the meta tags with Suspense and I also tried wrapping them with <Show when={data()} /> but to no avail.

import { Meta, Title } from '@solidjs/meta'

const SomeComponent = () => {
  const data = createAsync(() => getData())
  const title = () => `This -> ${data().name} <- is undefined temporarily`
  return (
    <Title>{title()}</Title>
    <Meta property='og:title' content={title()} />
  )
}

import { Meta, Title } from '@solidjs/meta'

const SomeComponent = () => {
  const data = createAsync(() => getData())
  const title = () => `This -> ${data().name} <- is undefined temporarily`
  return (
    <Title>{title()}</Title>
    <Meta property='og:title' content={title()} />
  )
}

Some search engine webmasters tool started to see some undefined values in my strings, so I believe this is not the ideal behavior when it comes to meta tags.

1 Reply

Adam Goldstein•4w ago

I think you're missing adding deferStream: true to the async options * If you want the title to render in order with the stream and you're rendering SSR, that is, which will ensure best SEO/OG support and such (though may not be strictly necessary these days). Otherwise wrapping them in a Suspense boundary should make cause load in later out of order, but skip the undefined values

Gaming

Programming

How to avoid temporary undefined values in template literals in solid-meta?