Need assistance with Open Graph and SSR Implementation

[clarkandrew10 (apclark)]

Hello! I’m currently making site updates to a client’s site that is built using Vite, Typescript React, Sanity CSM, and Vercel. In a recent update I needed to implement server side rendering so that our open graph meta tags are dynamically populated as needed. My node server is working as expected - request for page is made, we query sanity for the page’s SEO attributes, apply those attributes to the index.html file by replacing placeholders like $OG_TITLE with the corresponding value, then send the file to the client. The application works as expected locally with meta tags populating as they should but the issue arises when deployed to Vercel. On a preview url I notice that on load the site’s title tag loads as $OG_TITLE for a moment before being updated with the correct title (“Hudson Cannabis”), see below for example:
[Screen recording link]
When using Vercel’s open graph tool I can also confirm that when crawled all OG tags remain as the default:

I have a suspicion that this might have to do with how Vercel serves static(?) files but I’m not 100% sure and I’m hitting a bit of a dead end while investigating this issue.

---

Code references

vercel.json

{
	"rewrites": [
		{
			"source": "/(.*)",
			"destination": "/server/index.ts",
           // I've also updated this to be "destination": "/index.html" with no change
			"statusCode": 200
		}
	]
}

Simplified server/index.ts

// Serve static files first, but exclude index.html
app.use(
	express.static(path.resolve(process.cwd(), "./dist"), {
		index: false,
	})
);

const indexHtmlPath = path.resolve(process.cwd(), "./dist", "index.html");

app.get("*", async (request, response) => {
	const requestedPath = request.path.substring(1);

	try {
		const seo = await getPageSEOByPath(requestedPath);

		const html = await updateHtmlWithSeo(seo);

		response.send(html);
	} catch (error) {
		console.error({
			message: `Error fetching data from Sanity for path: ${requestedPath}`,
			error,
		});
		response.status(500).send("Server error");
	}
});

Preview link:

$OG_TITLE

Let me know if additional information is needed, any help with this would be much appreciated !!

[system]

If you’re having trouble deploying an Express app, this guide can help.

How to Deploy an Express.js Application to Vercel

You can also ask v0 for suggestions tailored to your own project setup.