Prefetching data

In this section, we will learn how to prefetch assets and loader data in Remix and how to utilize prefetching to speed up transition times.

Remix compiles the routes folder into a routing hierarchy at build time. The hierarchy information is stored in an asset manifest in the public folder. This asset manifest is used by both Remix’s frontend and backend applications.

Since Remix has access to the asset manifest on the client, Remix knows in advance which loader functions to call to transition to a route. This allows Remix to prefetch loader data (and route assets) before the transition.

Enabling prefetching in Remix is as easy as setting a prop on the link we want to prefetch data for:

1. Open the /app/routes/dashboard.tsx file in your editor.
2. Add the prefetch property to the Income and Expenses navigation links:

   <ul className="mt-10 w-full flex flex-row gap-5">  <li className="ml-auto">  ...