How to Load Data in Remix: Simple Guide with Examples

In Remix, you load data by exporting a loader function from your route module. This function runs on the server, fetches data, and returns it as JSON, which you access in your component using the useLoaderData hook.

Syntax

To load data in Remix, you export an async loader function that returns data. Inside your React component, you call useLoaderData() to get that data.

• loader: Runs on the server before rendering.
• useLoaderData(): Hook to access loader data in the component.

tsx

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

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

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

Output

Hello from loader!

Example

This example shows how to load a list of users from a fake API and display their names.

tsx

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

export async function loader() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await response.json();
  return json(users);
}

export default function Users() {
  const users = useLoaderData();
  return (
    <main>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Output

<main>\n  <h1>User List</h1>\n  <ul>\n    <li>Leanne Graham</li>\n    <li>Ervin Howell</li>\n    <li>Clementine Bauch</li>\n    <li>Patricia Lebsack</li>\n    <li>Chelsey Dietrich</li>\n    <li>Mrs. Dennis Schulist</li>\n    <li>Kurtis Weissnat</li>\n    <li>Nicholas Runolfsdottir V</li>\n    <li>Glenna Reichert</li>\n    <li>Clementina DuBuque</li>\n  </ul>\n</main>

Common Pitfalls

1. Forgetting to export the loader function: Without exporting loader, Remix won't fetch data before rendering.

2. Using client-side data fetching instead of loader: Remix encourages server-side data loading for better performance and SEO.

3. Not returning JSON with json() helper: Always wrap your data with Remix's json() to set correct headers.

tsx

/* Wrong: No loader exported */
import { useLoaderData } from '@remix-run/react';

export default function Page() {
  const data = useLoaderData(); // This will fail
  return <div>{data.message}</div>;
}

/* Right: Export loader and return json */
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export async function loader() {
  return json({ message: 'Hello!' });
}

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

Quick Reference

• Export loader: Runs on server, fetches data.
• Return data with json(): Sets proper response headers.
• Use useLoaderData() in component: Access loaded data easily.
• Loader runs on every request: Good for fresh data.

Key Takeaways

Always export an async loader function to fetch data on the server in Remix.

Use the useLoaderData hook inside your component to access the loader's returned data.

Wrap your returned data with Remix's json() helper for correct response formatting.

Loader functions run on every request, ensuring fresh data for each page load.

Avoid client-side fetching for initial data to leverage Remix's server-side rendering benefits.