SSR for injecting social meta tags
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...
9 Replies
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.
@James 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""
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?
@bacon
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 - @James 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
@bacon 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-ogHmm, could that repo be used to render the html of the page itself as the meta card?
@James
I basically want a “screenshot” of my gallery as the meta image
not some arbitrary html
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 itselffair