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

2 messages · Page 1 of 1 (latest)

white pumice
#

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?

#

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} />