How to Use Loader Function in Remix for Data Loading

In Remix, use the loader function to fetch data on the server before rendering a route. The loader returns data that your component accesses via useLoaderData(), enabling fast and SEO-friendly pages.

Syntax

The loader function is an async function exported from a route module. It receives a LoaderArgs object and returns data, usually as JSON. Your component then calls useLoaderData() to access this data.

• export async function loader({ request, params }): Fetch or prepare data here.
• Return data with return json(data) or plain object.
• In the component, call const data = useLoaderData() to get the loader's result.

tsx

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

export async function loader({ params }) {
  // fetch or compute data
  return json({ message: 'Hello from loader!' });
}

export default function MyRoute() {
  const data = useLoaderData();
  return <div>{data.message}</div>;
}

Output

Hello from loader!

Example

This example shows a loader fetching a greeting message and the component displaying it. The loader runs on the server before the page renders, so the message is ready immediately.

tsx

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

export async function loader() {
  // Simulate fetching data
  const greeting = 'Welcome to Remix loader!';
  return json({ greeting });
}

export default function Greeting() {
  const { greeting } = useLoaderData();
  return <h1>{greeting}</h1>;
}

Output

Welcome to Remix loader!

Common Pitfalls

• Not exporting the loader function from the route file causes no data to load.
• Returning raw objects instead of using json() can cause errors or unexpected behavior.
• Trying to use useLoaderData() outside of a route component will fail.
• Forgetting that loader runs on the server, so browser-only APIs like window are unavailable.

tsx

/* Wrong: missing export */
async function loader() {
  return { message: 'Hi' };
}

/* Right: export and use json() */
import { json } from '@remix-run/node';
export async function loader() {
  return json({ message: 'Hi' });
}

Quick Reference

Concept	Description
loader function	Async function exported from route to fetch data before rendering
useLoaderData()	Hook to access loader data inside the route component
json()	Helper to return JSON responses from loader
Server-side only	Loader runs on server, no browser APIs allowed
Error handling	Throw Response or errors inside loader for Remix to catch

Key Takeaways

Always export an async loader function from your route to fetch data.

Use the json() helper to return data safely from the loader.

Access loader data inside your component with useLoaderData().

Remember loader runs on the server, so avoid browser-only code there.

Handle errors in loader by throwing Responses for Remix to manage.