tanstack-start-loaders
TanStack Start Loaders
TanStack Start provides beforeLoad and loader functions for route data loading. Both are isomorphic - they run on the server during SSR and on the client during navigation.
Critical Rule
Loaders should call server functions when accessing databases, APIs with secrets, or any server-only resources. Loaders are isomorphic (run on both server and client), so they cannot directly access server-only code.
// ❌ WRONG - Direct database access in loader
export const Route = createFileRoute('/posts')({
loader: async () => {
// This will FAIL on client-side navigation!
const posts = await db.query('SELECT * FROM posts');
return { posts };
},
});
// ✅ CORRECT - Call server function from loader
More from netlify/swar-templates
content-collections
Use content-collections for type-safe content management with markdown files. Use when building blogs, documentation sites, or any content-driven pages with frontmatter and markdown.
1tanstack-start-routes
Create and manage routes in TanStack Start using file-based routing. Use when adding new pages, configuring layouts, setting up nested routes, or working with route parameters.
1tanstack-start-project-setup
Set up and configure TanStack Start projects. Use when creating new projects, configuring the router, setting up TanStack Query integration, or configuring build settings.
1tanstack-start-api-routes
Create API routes (server routes) in TanStack Start for handling HTTP requests. Use when building REST APIs, webhooks, or any HTTP endpoint that returns data rather than rendering a page.
1