Remix Loaders — Server-Side Data Fetching

In this tutorial, you will learn about Remix Loaders. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Remix loaders: fetch data on the server before rendering, pass data to components, handle errors, and optimize loader performance for fast page loads.

In this lesson, you'll write loader functions that fetch data on the server, access URL params and request headers, handle loading errors, and pass typed data to components.

What You'll Learn

How to define loaders, access params and request data, return JSON responses, handle errors with throw, and type loader data.

Why It Matters

Loaders are the foundation of data fetching in Remix. They run on the server, sending fully-formed HTML with data to the client. No client-side loading spinners needed.

Real-World Use

DodaZIP's admin uses loaders to fetch user lists, system metrics, and configuration data before rendering pages for instant display.

flowchart LR
    A[Request] --> B[Loader: Server]
    B --> C[Fetch Data]
    C --> D[Render HTML]
    D --> E[Client Hydrates]
    style B fill:#121212,color:#fff

Basic Loader

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export const loader = async () => {
  return json({ message: "Hello from the server!" });
};

export default function Index() {
  const data = useLoaderData<typeof loader>();
  return <h1>{data.message}</h1>;
}

Output: The page renders with "Hello from the server!" in the HTML. No client-side fetch needed.

Accessing Params

Use dynamic segments in loaders:

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export const loader = async ({ params, request }) => {
  const { slug } = params;
  const post = await getPost(slug);
  
  if (!post) {
    throw new Response("Not Found", { status: 404 });
  }
  
  return json(post);
};

export default function BlogPost() {
  const post = useLoaderData<typeof loader>();
  return <article><h1>{post.title}</h1></article>;
}

Accessing Request Data

Read headers, search params, and cookies from the request:

export const loader = async ({ request }) => {
  const url = new URL(request.url);
  const query = url.searchParams.get("q");
  const auth = request.headers.get("Authorization");
  
  return json({ query, authenticated: !!auth });
};

Throwing Responses

Throw Response objects for error handling:

export const loader = async ({ params }) => {
  const user = await db.user.findUnique(params.id);
  
  if (!user) {
    throw new Response("User not found", { status: 404 });
  }
  
  if (user.banned) {
    throw new Response("Account suspended", { status: 403 });
  }
  
  return json(user);
};

Thrown responses are caught by the nearest error boundary.

Type-Safe Loaders

Remix infers types from loaders to actions:

import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

type Post = { title: string; content: string };

export const loader = async ({
  params,
}: LoaderFunctionArgs): Promise<Response> => {
  const post: Post = await getPost(params.slug);
  return json(post);
};

export default function Post() {
  const post = useLoaderData<typeof loader>(); // TypeScript knows the shape
  return <h1>{post.title}</h1>;
}

Common Mistakes

1. Not returning JSON from loaders: Loaders must return a Response (use json() helper) or throw a Response. Returning undefined causes errors.
2. Fetching data in the component: Loaders replace useEffect for initial data fetching. Don't duplicate fetches in the component.
3. Not handling missing data: Always check for null/undefined data and throw 404 responses for missing resources.
4. Loading data the parent already has: Child routes can use useRouteLoaderData() to access parent loader data instead of re-fetching.

Practice Questions

1. Where does a loader run? Answer: On the server, before the page renders. The data is included in the initial HTML response.

2. How do you access URL parameters in a loader? Answer: Through params in the loader function arguments. Dynamic segments are available as params properties.

3. What happens if a loader throws a Response? Answer: The nearest ErrorBoundary or CatchBoundary renders with the thrown response's status and data.

4. How do you type loader data in the component? Answer: Use useLoaderData<typeof loader>(). TypeScript infers the return type from the loader function.

Challenge

Build a product catalog page with a loader that fetches from an API, supports search params for filtering, throws 404 for invalid product IDs, and includes pagination.

Mini Project

Create a blog with a loader that fetches posts from a content source, supports category filtering via search params, and includes loading states for the parent layout.

FAQ

What's Next

Learn about Remix Data Loading Patterns for advanced data loading strategies.