Here’s the full post, all in one place so you can copy/save it: --- If you’re using Lovable, you’ll hit this problem: Lovable can publish your app, but it can’t run the extra build steps you need for pre-rendering. So if you want real SEO (real HTML, real ``, real meta tags in “View Source”), you do the pre-render build in VS Code terminal and deploy the output. This post is the exact step-by-step. No assumptions. ⸻ ## What you’re building You are turning a normal React SPA into: * Static HTML files for your key pages (home, services, pricing, blog, etc.) * with real head tags and real body content * but still keeping React as a SPA after load (it hydrates) This is not Next.js. This is not a server. This is build-time pre-rendering. ⸻ ## Before you start (what you must have) You need: 1. Your Lovable project in a GitHub repo 2. VS Code installed 3. Node.js installed (so npm works) 4. A terminal you can run commands in (VS Code terminal is fine) ⸻ ## Step 1 – Get the Lovable project into VS Code 1. In Lovable, connect your project to GitHub 2. In VS Code terminal: ```bash git clone YOUR_GITHUB_REPO_URL cd YOUR_REPO_FOLDER npm install npm run dev ``` 3. Open the local dev URL and confirm it works If the site doesn’t run locally, stop and fix that first. ⸻ ## Step 2 – Install SSR-safe head tags This is what makes SEO tags collectable during rendering. Run: ```bash npm i react-helmet-async ``` ⸻ ## Step 3 – Create the SEO component every page will use Create: `src/components/SeoHelmet.tsx` Use this exact minimal version: ```tsx import React from "react"; import { Helmet } from "react-helmet-async"; type Props = { title: string; description: string; path: string; }; export function SeoHelmet({ title, description, path }: Props) { const url = `https://YOURDOMAIN.COM${path}`; return ( <Helmet> <title>{title} ); } ``` Important: * Replace `https://YOURDOMAIN.COM` with your real domain. ⸻ ## Step 4 – Add SEO to each important page On every key page component (home, services, pricing, etc.) add this at the top: ```tsx import { SeoHelmet } from "@/components/SeoHelmet"; export default function ServicesPage() { return ( <>

Services

); } ``` If a page doesn’t include `SeoHelmet`, it will not get correct pre-rendered tags. ⸻ ## Step 5 – Move BrowserRouter OUT of App.tsx (this is critical) Pre-rendering needs the router to switch depending on environment. You must do this: * `App.tsx` should contain your `` and `` only * It should NOT wrap with `` Example `src/App.tsx`: ```tsx import React from "react"; import { Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; import Services from "./pages/Services"; export default function App() { return ( } /> } /> ); } ``` This step is what makes SSR possible. ⸻ ## Step 6 – Create the client entry (hydrates the HTML) Create: `src/entry-client.tsx` ```tsx import React from "react"; import { hydrateRoot } from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import { HelmetProvider } from "react-helmet-async"; import App from "./App"; hydrateRoot( document.getElementById("root")!, ); ``` This makes the pre-rendered HTML become interactive. ⸻ ## Step 7 – Create the server entry (renders routes to HTML) Create: `src/entry-server.tsx` ```tsx import React from "react"; import { renderToString } from "react-dom/server"; import { StaticRouter } from "react-router-dom/server"; import { HelmetProvider } from "react-helmet-async"; import App from "./App"; export function render(url: string) { const helmetContext: any = {}; const html = renderToString( ); return { html, helmet: helmetContext.helmet }; } ``` This file is used only during the build. ⸻ ## Step 8 – Update index.html with injection placeholders Open `index.html` and make sure your root looks like this: ```html

``` And in the ``, add placeholders: ```html ``` Your final `` area should contain those comments. ⸻ ## Step 9 – Create the prerender script Create: `scripts/prerender.js` ```js import fs from "fs"; import path from "path"; import { render } from "../dist-ssr/entry-server.js"; const template = fs.readFileSync("dist/index.html", "utf-8"); const routes = [ "/", "/services", "/pricing", "/blog" ]; for (const route of routes) { const { html, helmet } = render(route); const out = template .replace("", html) .replace("", helmet.title.toString()) .replace("", helmet.meta.toString()) .replace("", helmet.link.toString()) .replace("", helmet.script.toString()); const folder = path.join("dist", route === "/" ? "" : route); fs.mkdirSync(folder, { recursive: true }); fs.writeFileSync(path.join(folder, "index.html"), out); console.log("✅ Pre-rendered:", route); } ``` Now add your real routes to that list. Example: `/service-areas/northampton` ⸻ ## Step 10 – Build in VS Code terminal (this is the Lovable workaround) Because Lovable can’t run multiple build steps, you do it locally. You need two builds: 1. client build → `dist/` 2. server build → `dist-ssr/` then run prerender. Run these commands: ```bash npx vite build --outDir dist npx vite build --ssr src/entry-server.tsx --outDir dist-ssr node scripts/prerender.js ``` When it finishes, you should see: * `dist/services/index.html` * `dist/pricing/index.html` * etc. ⸻ ## Step 11 – Verify properly (do not use DevTools) Open the built file directly: ```bash cat dist/services/index.html ``` You must see: * `…` * `` * and real page HTML inside `

` After deploy, confirm again by: * Right click page → **View Page Source** * Search for `` and `<meta name="description">` If it’s present in source, bots see it. ⸻ ## Step 12 – Deploy only the dist folder This is the output you deploy. **Cloudflare Pages option** * Use Cloudflare Pages to deploy the repo, or * Push `dist/` into a separate deploy branch if you prefer The important rule: > The deployed site must be serving the HTML files inside `dist/`. ⸻ ## Common failure points (read these if it “doesn’t work”) 1. You left `BrowserRouter` inside `App.tsx` * Fix: Router provider belongs in entry files 2. You didn’t add the route to `routes[]` in `prerender.js` * Fix: only listed routes get HTML files 3. You checked DevTools instead of View Source * Fix: View Source or `cat dist/...` 4. Your page doesn’t render `SeoHelmet` * Fix: add it to every important page ⸻ ## What you get when this is done * SEO tags visible in raw HTML * Real content for crawlers * Better social previews * Still behaves like a SPA after load --- ## One important thing before you copy this into production If you follow the steps above as-is, you’ll get working pre-rendered HTML. However, there’s one decision point I deliberately haven’t fully automated in this post, because it’s the place where people usually break their app without realising it. Specifically: * Which routes are safe to pre-render * Which routes must stay client-only * How auth, dashboards, and dynamic data affect pre-rendering * How to avoid accidentally shipping cached HTML for user-specific pages This part is not one-size-fits-all. Two apps can follow the same steps above and still need different route strategies, depending on: * whether you have auth * whether pages rely on cookies/session * whether Lovable generated shared layouts * whether you’re planning to add users later If you guess here, things often look fine locally and then quietly break in production. --- ## If you want help doing this safely If you’d like, I can: * review your route list * tell you exactly which pages should be pre-rendered vs left SPA-only * sanity-check your setup before you deploy * help you avoid SEO or auth issues you won’t see until later Just reply with: * your route list * whether your app has auth / dashboards * and where you’re deploying I usually do this as a short, focused review so you don’t lose days debugging edge cases — but I’m happy to point you in the right direction either way. </article></body></html>