SSR for injecting social meta tags | Cloudflare Developers | Page 1

short pewter Nov 4, 2023, 3:48 PM

#

For my web framework that does not support SSR out of the box, I'm trying to create a workers function that will dynamically render meta tags based on the given route. So far I've found this:
https://community.cloudflare.com/t/cloudflare-pages-functions-ssr-server-side-rendering/338481

Can anyone point me to more resources on this?

Cloudflare Community

Cloudflare pages functions SSR (Server side rendering)

Super excited that Cloudflare pages goes full stack Cloudflare Pages Goes Full Stack I’m very interested in SSR section it mentioned in the article I have created functions/todos/[id].ts in my react root folder. like export async function onRequestGet({ request, params }) { return new Response('hello world'); } After deploy it to page...

short pewter Nov 4, 2023, 4:16 PM

#

For anyone that finds this, I found https://developers.cloudflare.com/pages/platform/functions/plugins/vercel-og/ which will fit my use case!

vercel/og · Cloudflare Pages docs

The @vercel/og Pages Plugin is a middleware which renders social images for webpages. It also includes an API to create arbitrary images.

patent galleon Nov 14, 2023, 12:39 AM

#

@short pewter im trying this on my end (also not using SSR) but cant get it to work

#

on build im getting "Could not resolve "@cloudflare/pages-plugin-vercel-og""

short pewter Nov 14, 2023, 12:54 AM

#

I'd imagine that's a problem with https://developers.cloudflare.com/workers/runtime-apis/nodejs/

Node.js compatibility · Cloudflare Workers docs

Most Workers import one or more packages of JavaScript or TypeScript code from npm as dependencies in package.json. Many of these packages rely on …

#

And is it installed in your package.json?

#

@patent galleon

patent galleon Nov 14, 2023, 1:06 AM

#

Actually just fixed this and turned out to be a weird issue with the fact I had no build command (didn’t need one)

#

But the rendering isn’t working though - @short pewter can you share your plugin code? I’m assuming you also weren’t using react

#

I just have an index.html I want rendered as the preview (basically the whole body, or maybe a more specific css selector like .body.main-content

short pewter Nov 14, 2023, 4:47 PM

#

@patent galleon I ended up going a pretty backwards route since I had an existing worker that did the image generation using https://github.com/kvnang/workers-og. So the role of the pages function ended up just being injecting the meta tags which I figured out how to do using the source code of @cloudflare/pages-plugin-vercel-og

patent galleon Nov 14, 2023, 6:39 PM

#

Hmm, could that repo be used to render the html of the page itself as the meta card?

#

@short pewter

#

I basically want a “screenshot” of my gallery as the meta image

#

not some arbitrary html

short pewter Nov 14, 2023, 6:40 PM

#

You could try. workers-og takes in a string rather than JSX. You might have some trouble with it formatting correctly to fit the bounds of the image, as well as what it's compatible with (e.g styling and elements on the page that may not be supported by the render engine backing the library).

#

You will probably be better off making something custom that resembles the page rather than just tossing in the page itself

#SSR for injecting social meta tags