So I have been struggling to get setting up my vite SSR react server right so it can render my react-helmet-async
meta tags.
Worked my way on getting it to render the meta tags and links with this entry-server.jsx
snippet:
import React from "react";
import ReactDOMServer from "react-dom/server";
import App from "./components/App";
import { StaticRouter } from "react-router-dom/server";
import { Router, helmetContext } from "./routes/Routes";
import { Helmet } from "react-helmet-async";
export function render({ path }) {
const html = ReactDOMServer.renderToString(
<StaticRouter location={path}>
<Router />
</StaticRouter>
);
const { helmet } = helmetContext;
const head = `
${helmet.title.toString()}
${helmet.priority.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
${helmet.script.toString()}
`;
return { html, head };
}
Which worked out with this snippet on the server.js
:
let template;
let render;
if (!isProduction) {
// Always read fresh template in development
template = await fs.readFile("./index.html", "utf-8");
template = await vite.transformIndexHtml(url, template);
render = (await vite.ssrLoadModule("/src/entry-server.jsx")).render;
} else {
template = templateHtml;
render = (await import("./dist/server/entry-server.js")).render;
}
const rendered = await render(url, ssrManifest);
const html = template
.replace(`<!--app-head-->`, rendered.head ?? "")
.replace(`<!--app-html-->`, rendered.html ?? "");
It works on my local machine, don’t get me wrong. It renders the server side when I build and preview; I know this by viewings the source code on my Google Chrome browser – not via inspect or dev mode.
But now, when I deploy my app to Vercel for some reason the SEO doesn’t get recognised by crawlers and when I view the source code, the meta tags and html doesn’t get injected, therefore it only gets rendered on the client side.
I have a feeling that this might be an error on the Vercel server but I can’t be sure about that.
I want to understand how I could go about it.
Here is the project repo:
https://github.com/unnamed-lab/fullmoon-real-estate