Intro to Remix

Rendering Data

Remix allows us to hook into that loader data on the same route with the useLoaderData() hook. It's even type safe!


export async function loader() {
  const authors = getAuthors();
  return json({ authors });
}

export default function Route() {
  const { authors } = useLoaderData<typeof loader>();
  return (); // return jsx to render data
}

Isn't this awesome! End to end type saftey! Any time a user goes to this route, Remix automatically calls a loader if it's available, waits for that data to come back, renders the route's component on the server, and hydrates the HTML and CSS back to the client. 🤯

I want to go over a couple benefits that show just how quickly we're able to build performant websites using loaders.

Introduction

PESPAs

Creating a Remix App

Remix Routes

Remix Loaders

Remix Actions

In Review

Rendering Data