Loader functions for data fetching in Remix - Mini Project: Build & Apply

Loader functions for data fetching

📖 Scenario: You are building a simple Remix app that shows a list of books fetched from a server. You will use a loader function to fetch the data before the page renders.

🎯 Goal: Create a Remix route component that uses a loader function to fetch a list of books and display their titles on the page.

📋 What You'll Learn

Create a loader function that returns a list of books

Use the useLoaderData hook to access the loaded data in the component

Render the list of book titles inside an unordered list

Export the loader function and the default component from the route file

💡 Why This Matters

🌍 Real World

Loader functions in Remix are used to fetch data on the server before rendering pages, improving performance and SEO.

💼 Career

Understanding loader functions is essential for building data-driven Remix applications and working with server-side rendering frameworks.

1

Create the initial data array

Create a constant called books that is an array of objects with these exact entries: { id: 1, title: 'The Hobbit' }, { id: 2, title: '1984' }, and { id: 3, title: 'Pride and Prejudice' }.

Remix

# Create a constant called books with the specified array of objects
# Your code here

Hint

Use const books = [ ... ] with the exact objects inside the array.

2

Create the loader function

Create and export an async function called loader that returns a JSON response with the books array inside an object with key books. Use json from @remix-run/node.

Remix

const books = [
  { id: 1, title: 'The Hobbit' },
  { id: 2, title: '1984' },
  { id: 3, title: 'Pride and Prejudice' }
];

// Create and export the loader function
// Your code here

Hint

Remember to import json from @remix-run/node and return json({ books }) inside the loader function.

3

Use useLoaderData to access data

Import useLoaderData from @remix-run/react. Inside the default exported function component called Books, call useLoaderData() and store the result in a constant called data.

Remix

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

const books = [
  { id: 1, title: 'The Hobbit' },
  { id: 2, title: '1984' },
  { id: 3, title: 'Pride and Prejudice' }
];

export async function loader() {
  return json({ books });
}

// Create the Books component and use useLoaderData
// Your code here

Hint

Import useLoaderData and call it inside the Books component to get the loaded data.

4

Render the list of book titles

Inside the Books component, return a <main> element containing an <h1> with text Book List and an unordered list <ul>. Use data.books.map with book as iterator to render each book's title inside a <li> with a key attribute set to book.id.

Remix

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

const books = [
  { id: 1, title: 'The Hobbit' },
  { id: 2, title: '1984' },
  { id: 3, title: 'Pride and Prejudice' }
];

export async function loader() {
  return json({ books });
}

export default function Books() {
  const data = useLoaderData();
  
  // Render the book list inside main
  // Your code here
}

Hint

Use JSX to render the list inside a <main> with a heading and an unordered list. Use map to create <li> elements with keys.