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 };
  },
});