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>
<Title>
which is set in my
app.jsx
app.jsx
file. Also worth noting that I have set the `og:

 meta tags and the

 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?

SolidJS•14mo ago•

9 replies

wes337

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>
  );
}

 meta tags and the

 meta tags and the

Solid-Meta on dynamic SSR routes

Similar Threads

Solid-Meta on dynamic SSR routes

Similar Threads

Similar Threads

Similar Threads