S
SolidJS•3w ago
chanon_s

How to have tags in <head> in <StartServer> render using async loaded data?

I am trying to setup lots of meta tags (eg. for Facebook Open Graph) and also page Schema (which is a <script> tag). Some of the data in there needs to depend on async loaded data. But I can't even get createResource to work inside StartServer (just having a createResource in it results in a hydration error). Also I need it to work with SSR for SEO. The @solidjs/meta package is way inadequate for this. What kind of approach can I use?
1 Reply
chanon_s
chanon_sOP•3w ago
Wait, looks like I found the solution! Here it is in case anyone finds this: entry-server.tsx: 
const MyHeadTags = (props: { pathName: string }) => {
    const [pageMetaData] = createResource(async () => {
        // do stuff with props.pathName
                // return data
    }, { deferStream: true })

    return (
        <Suspense>
            <meta whatever={pageMetaData.whatever} />
            <whatever tags={needed} /> 
        </Suspense>
    )
}

export default createHandler((context) => {
    const url = new URL(context.request.url);

    return <StartServer
        document={({ assets, children, scripts }) => (
            <html lang="en">
                <head>
                    <MyHeadTags pathName={url.pathname} />
  
const MyHeadTags = (props: { pathName: string }) => {
    const [pageMetaData] = createResource(async () => {
        // do stuff with props.pathName
                // return data
    }, { deferStream: true })

    return (
        <Suspense>
            <meta whatever={pageMetaData.whatever} />
            <whatever tags={needed} /> 
        </Suspense>
    )
}

export default createHandler((context) => {
    const url = new URL(context.request.url);

    return <StartServer
        document={({ assets, children, scripts }) => (
            <html lang="en">
                <head>
                    <MyHeadTags pathName={url.pathname} />
By parsing the context.request.url, we can then put in the correct meta tags and whatever other tags needed depending on the page without having to use @solidjs/meta Of course the meta tags probably won't update on client side navigation, but this should be OK for SEO stuff.

Did you find this page helpful?