[Bug?]: Meta title and description undefined when preload pages

[multivoltage]

Duplicates

• [x] I have searched the existing issues

Latest version

• [x] I have tested the latest version

Current behavior 😯

I have a [slug.tsx]. meta title and description render "undefined" when load page directly, but render title correctly when navigate from "list" page to "[slug.tsx]" page with an anchor.

// [slug.tsx]
const getPillQuery = query(async (slug: string) => {
  "use server";
  return getPillBySlug(slug);
}, "pill");

export const route = {
  load: ({ params }) => {
    void getPillBySlug(params.slug);
  },
} satisfies RouteDefinition;

export default function PillPage(props: RouteSectionProps) {
  const pill = createAsync(() => getPillQuery(props.params.slug))

  return (
    <main>
      <Title>{pill()?.title}</Title>
      todo
    </main>
  );
}

and app.config.ts

export default defineConfig({
  server: {
    prerender: {
      routes: ["/", "/pills"],
    },
    hooks: {
      async "prerender:routes"(routes) {
        const pills = await getPills();
        pills.forEach(({ id, slug }) => routes.add(`/pills/${slug}`));
      },
    },
  },
});

Expected behavior 🤔

I have a list of "pills" and want to generate a build time N pages. Each page should have right info. Maybe I do in a wrong way

Context 🔦

No response

Your environment 🌎

• node 22
• using npm

[wes337]

I am also having this issue. It is preventing me from having any kind of dynamic metadata on my route pages

[dennev]

@wes337 @multivoltage https://github.com/solidjs/solid-start/discussions/1926#discussioncomment-13820196

I'm guessing it's because the Render Context and Server Function Context are different. It may depend on the implementation of getPillBySlug, but if it's not a value that can be initialized in the initial render step, you'll probably need to initialize/fetch it on the client side with onMount or something.

[wes337]

@dennev I don't think this is the issue...

Do you know any examples of dynamically rendered metadata? Like something that could be seen here https://www.opengraph.xyz, but where the metadata is dynamically set and not static values.

[wes337]

@multivoltage are you also using CSS modules in your project? Or what are you using for styling?

[multivoltage]

@wes337 honestly I did not remember because with this wrong behavior I chosed different framework. Bit yes, probably I used CSS modules. If you can wait Maybe I setup a basic example tò replicate

[wes337]

For anybody having the same issue:

I was able to work around this by using Vercel middleware. I had to check the request headers if the user agent is a social media crawler, and if yes return some raw HTML with the meta data I want to show. I used this article, which is for React, but reworked it for Solid

This is the end result

Maybe this issue is somehow related to hosting SolidStart on Vercel?

[multivoltage]

I has the issue in my localhost. This is not related with hosting, but thanks