Prerender a React 19 and Vite Site for SEO, No Next.js

This site is a React 19 and Vite app, yet every page ships as complete HTML. Search engines and AI fetchers that never run JavaScript still see the headline, the body, the FAQ and the structured data. The mechanism is small enough to read in one sitting.

#Why not ship an empty div

A client-rendered app returns a near-empty document and builds the page in the browser. Google can handle that, but its documentation says pages with a 200 status go into a rendering queue and may wait longer than a few seconds. The same page says server-side or pre-rendering is still a great idea and that not all bots can run JavaScript. For a personal site whose job is to be found and quoted, removing that dependency is cheap insurance.

#The three build steps

"build:client": "vite build",
"build:server": "vite build --ssr src/entry-server.jsx --outDir dist-ssr",
"prerender": "node scripts/prerender.mjs",
"build": "npm run build:client && npm run build:server && npm run prerender"

• Client build writes the browser bundle and an index.html template to dist/.
• Server build bundles entry-server.jsx, which exports render(path) using React Router's static router and renderToString.
• Prerender script imports that bundle, loops over the route list, replaces two placeholders in the template with the head tags and the rendered markup, and writes dist/blogs/my-post/index.html.

#One source of truth

The route list, the head tags, the JSON-LD, the sitemap, the RSS feed and llms.txt all derive from the same post registry. Adding a post is one file; the listing page, the sitemap entry, the feed item and the structured data follow without further edits. That is also why nothing drifts: there is no second place where a title or date is typed.

#Hydration and head tags

In the browser, hydrateRoot attaches to the prerendered markup instead of replacing it. The head is written at build time, and a small client component swaps meta tags on in-app navigation, replacing the old JSON-LD rather than appending a second copy, which Search Console reports as a duplicate FAQPage.

#Hosting details that matter

• Each route becomes a folder with an index.html, so the host redirects the slashless URL. Use the slashed URL as canonical everywhere.
• There is no single-page fallback rewrite. Unknown paths return a real 404 through ErrorDocument, because rewriting them to index.html returns 200 and creates soft 404s.
• The .htaccess is a dotfile. File managers hide it, and forgetting it silently drops your redirects and headers.

#Verify the output

Fetch a post with a plain HTTP client and check that the body text, the canonical tag and the JSON-LD are all in the response. If they are, every crawler sees what you see.

#Related notes

• SEO, AEO and GEO for a Developer Portfolio: What Works