Building apps using TanStack Start | Lovable<br>Skip to main content

Get started

Log inGet started

All postsPublished June 1, 2026 in Inside Lovable<br>Building apps using TanStack Start

Author: Fabian Hedin at Lovable

Starting May 13, new projects are Server-Side Rendered (SSR) and powered by TanStack Start, a modern React framework for building fast, full-stack apps. You don't have to opt in, configure anything, or learn anything new to start using it. Existing projects keep working as before, but get pre-rendering to enable improved readability for crawlers.

This post is for anyone wondering what changed under the hood and why. We'll cover what's different, why we picked TanStack Start, how the new pieces fit together, and what it means for the apps Lovable generates.

In short

Previously we created Single-Page Apps (SPAs) built with React + Vite and deployed as static files. Everything was Client-Side Rendered (CSR), which works well but comes with some limitations. Anything resembling backend logic (sending an email, calling a paid API, hitting a database with a service-role key, etc.) had to live in a separate edge function deployed independently of the app code that called it, living on a different URL.

The foundation of the new stack is TanStack Start, a full-stack React framework with first-class server-side rendering (SSR), static-site generation (SSG), and client-side rendering (CSR) per route, with integrated server functions. This allows for server-only logic to reside directly within your component files, functioning like standard calls while the build process manages the client-server separation. It also benefits our users in many ways.

Layer<br>Previous stack<br>New stack

Framework<br>Vite + React Router<br>TanStack Start (TanStack Router)

Runtime<br>Static hosting (Cloudflare Pages)<br>Cloudflare Workers

Rendering<br>Client-Side Rendering (CSR) only<br>Server-Side Rendering (SSR) or Static-Site Generation (SSG) or Client-Side Rendering (CSR) (per-route)

Server logic<br>Edge Functions<br>TanStack Server Functions

Database, auth, storage, realtime<br>Supabase<br>Supabase

Secrets<br>In Supabase<br>Cloudflare Workers bindings

Why TanStack Start

When we started looking for a new base framework, the constraints were clear. It had to stay in the React ecosystem, be open and independent, easy to deploy anywhere, support server-side rendering so search engines can better index Lovable-built apps, and be maintained by an established team with a strong developer ecosystem. TanStack Start fits on all counts.

TanStack Start's type system is strong and allows for end-to-end type safety, giving clearer guardrails for the AI generating code. The router is the same one many teams have been using for years, while the server runtime sits on top in a way that respects the underlying React server/client boundaries. It is designed to be deployed on any platform that can run a JavaScript server. On top of that, Lovable's own supply chain security scanning and hardened third-party library management ensure that building on Lovable with TanStack is safe and secure.

Rendering: SSR, SSG, and what the browser actually receives

The most impactful change is that pages now arrive at the browser with their content already in them. To understand why this matters, it helps to see what the old behavior looked like.

A client-rendered React app, on first request, sends back a near-empty HTML shell — basically a and a tag. The browser then downloads the JavaScript, executes it, and only then fetches the data needed to render the page. Two round trips before anything appears on screen. That can be slow and is effectively invisible to a class of traffic that matters a lot: crawlers.

Crawlers vary in what they do with a JavaScript-only page. Google does eventually render it, recent measurements put the median delay at around 10 seconds, with the long tail stretching to hours. Some other crawlers don't execute JavaScript at all, to them, a client-rendered app is just an empty page. In addition, social previewers on LinkedIn, Slack, WhatsApp, and X read meta tags from the HTML directly, so a client side-rendered app shows a generic preview even when the page has perfectly good title and description tags set per page.

TanStack's approach follows SEO best practices because with server-side rendering, the server runs the React tree, executes the loaders, and streams the result as fully-formed HTML on the first request.

For routes that don't depend on per-request data (blog posts, landing pages, marketing pages, about pages, anything where every visitor sees the same thing), TanStack Start can go one step further and prerender these routes at deploy time to serve them as flat HTML, no server execution at all at request time. Lovable's AI applies this automatically when a route qualifies.

The execution model: Where your code runs

One of TanStack Start's core principles is that code is isomorphic by default. Route modules, loaders, and components are included...