Introduction
The world of web application development never stands still. Every month, new tools, frameworks, and approaches emerge that change the game. One of the most notable recent news is Lovable's announcement of switching to TanStack Start for generating new projects. Starting May 13, all new applications created on the platform use server-side rendering (SSR) by default and run on TanStack Start. In this article, we'll break down exactly what happened, why it matters for developers, and how you can use these changes in practice.
What is TanStack Start and Why Does It Matter?
TanStack Start is a modern meta-framework built on top of TanStack Router and other libraries in the TanStack ecosystem. It offers developers a flexible, performant, and type-safe way to build SSR applications. While Lovable previously used other rendering solutions, the focus is now on server-side rendering, which provides several advantages:
- Improved SEO — SSR allows search engines to see the full HTML of a page on the first request, rather than waiting for JavaScript to execute.
- Fast initial load — Users see content faster, reducing bounce rates.
- Routing flexibility — TanStack Router supports nested routes, data loaders, and parallel requests.
What Changed Since May 13?
According to Lovable's official blog Source, starting May 13, all new projects generated on the platform are created by default using TanStack Start. This means:
- SSR is enabled by default — You don't need to manually configure server-side rendering.
- Routing and data loading — Built-in TanStack Router capabilities are used for preloading data on the server.
- Compatibility with AI generation — Lovable adapted its AI engine to generate code optimized for TanStack Start.
Why Was TanStack Start Chosen?
The choice of TanStack Start is no coincidence. Lovable's developers explain it by several factors:
- Type safety — TanStack Start integrates tightly with TypeScript, reducing runtime errors.
- Performance — The framework is optimized for fast loading and minimal bundle size.
- Community and ecosystem — TanStack is a mature ecosystem with many libraries (Query, Router, Table) that are easy to combine.
- Ease of migration — If you already have projects on TanStack Router, switching to Start doesn't require a full code rewrite.
How to Use This in Practice?
1. Creating a New Project with TanStack Start
If you want to try TanStack Start in action, the easiest way is to create a new project via Lovable or manually using the CLI:
npm create tanstack-app@latest
This command creates a template with SSR, TypeScript, and TanStack Router.
2. Working with Server Data
One of the key features of TanStack Start is the ability to load data on the server before the page is sent to the client. Example:
import { createFileRoute } from '@tanstack/react-router';
import { fetchPosts } from '../api/posts';
export const Route = createFileRoute('/posts')({
loader: async () => {
const posts = await fetchPosts();
return { posts };
},
component: PostsList,
});
Now post data will be loaded on the server, and the user will see a ready page immediately after the HTML loads.
3. Optimizing for SEO
If you're building content sites or blogs, SSR with TanStack Start gives you a significant advantage. Search engines can index your content without complex workarounds.
LSI Keywords for Better Indexing
In this text, we used the following LSI terms: server-side rendering, routing, type safety, ecosystem, performance, data loader, application generation. They help search engines better understand the article's topic and improve indexing.
Comments