Why SSR Matters in 2026
A decade ago, single-page React apps were fine for SEO because Google could render JavaScript. In 2026, the rendering budget per page is smaller, AI crawlers (ChatGPT, Claude, Perplexity) often don't execute JS at all, and Core Web Vitals weight first contentful paint heavily. Client-rendered apps lose on every axis.
How Lovable's SSR Works Under the Hood
Lovable's template uses TanStack Start with a Vite plugin that emits a server entry. When a request hits your published URL, Cloudflare Workers run your route's loader, render the React tree to an HTML string, inject metadata from the route's head() function, and return a fully-formed HTML document. The client then hydrates for interactivity.
What This Means for Your head() Function
Per-route metadata is no longer optional polish — it's the primary SEO surface. Every route file should export a head() with a unique title, description, og:title, og:description, og:url, and a canonical link. Generic site-wide meta in __root.tsx is for fallbacks only; leaf routes must override.
Verifying SSR Is Actually Working
Open your published URL, view source (not "inspect"), and search for your H1 text. If it's in the raw HTML, SSR is working. If you only see <div id="root"></div>, something is misconfigured — most often a route component that imports a browser-only module at module scope.
Common SSR Crashes and How to Fix Them
"window is not defined" during build: move browser-only imports inside useEffect or a client-only function. "Document is not defined": same fix. "Cannot read properties of undefined" during prerender: a loader is reading data that doesn't exist at build time — guard with a fallback or skip prerendering for that route.
Loaders, Server Functions, and SSR Data
Use route loaders for data the page needs before paint. Use createServerFn (with the right middleware) for data the user fetches after paint. Never put an auth-protected server function in a public route's loader — prerender has no session and the build will fail.
SSR + AI Search Engines
ChatGPT and Perplexity treat your published HTML as the source of truth. Real H1s, descriptive meta tags, semantic <article> and <section> wrappers, and JSON-LD schema make your content far more likely to be cited as an answer source. SSR is the prerequisite — none of this works without it.
Checklist Before You Publish
View-source shows real content, every route has a unique title and meta description, canonical links point to your production domain, JSON-LD validates in Google's Rich Results Test, and a sitemap.xml lists every public route. Hit publish only when all five pass.
Ready to Ship?
Want a 1-hour SEO audit of your Lovable app? We'll tell you exactly what to fix before you market.
Book a Call
