What are Remix loaders?

Loaders in Remix are server-side functions that fetch data for a route before rendering. Export a loader function from a route file: export async function loader({ params, request }) { const user = await db.getUser(params.id); if (!user) throw new Response("Not Found", { status: 404 }); return json(user); }. Access the data in the component: const user = useLoaderData();. Loaders run on the server on initial page load and on client-side navigation (Remix fetches the loader data via fetch). Key benefits: Co-location: data requirements are next to the component that uses them. Parallel loading: all loaders in the route hierarchy run in parallel. Automatic revalidation: after an action, Remix re-runs all loaders to refresh data. Type safety: with TypeScript, useLoaderData() is typed to the loader's return type. Loaders make data fetching simple — no useEffect, no loading states — just return data from the server.