wes337 Posts - Answer Overflow

wes337

•Created by wes337 on 1/26/2025 in #support

Solid-Meta on dynamic SSR routes

I am trying to set dynamically set metadata for Slack/X preview cards.

const getVideo = query(async (videoId) => {
  "use server";
  const response = await getVideo(videoId)
  return { video: data.video };
}, "video");

export const route = {
  preload: getVideo,
};

export default function VideoPage() {
  const params = useParams();
  const data = createAsync(() => getVideo(params.videoId), {
    deferStream: true,
  });

  return (
    <Suspense>
        {/* This works client-side only */}
        <Title>{data().video.title}</Title>
        {/* ... Rest of metadata tags below and the component code ... */}
    </Suspense>
  );
}

const getVideo = query(async (videoId) => {
  "use server";
  const response = await getVideo(videoId)
  return { video: data.video };
}, "video");

export const route = {
  preload: getVideo,
};

export default function VideoPage() {
  const params = useParams();
  const data = createAsync(() => getVideo(params.videoId), {
    deferStream: true,
  });

  return (
    <Suspense>
        {/* This works client-side only */}
        <Title>{data().video.title}</Title>
        {/* ... Rest of metadata tags below and the component code ... */}
    </Suspense>
  );
}

In this example, the title *does update dynamically, but only client-side. If I post this URL to Slack, the preview card gets the default <Title> which is set in my app.jsx file. Also worth noting that I have set the `og: meta tags and the twitter:*` ones too but omitted them from the example to keep it short I want people to be able to share video URLs on Slack and Twitter and elsewhere and the previews to show the dynamically generated metadata content. How can I do this? Am I missing something or is there some bug in my code?

10 replies

Gaming

Programming