Working with HTTP caching

The web platform utilizes HTTP headers to control caching behavior. Web clients can read caching directives specified in response headers to reuse previously fetched data. This allows web clients to avoid unnecessary network requests and improve response times. In this section, you will learn about popular HTTP caching headers and strategies and how to use them in Remix. First, we will see how we can define HTTP headers for document responses.

Adding HTTP headers in Remix

Remix’s route module API includes a headers export that we can use to add HTTP headers to the route’s document response. Like the links function, the headers function is only ever executed on the server.

The headers function is called after all loader functions and all parent headers functions. The headers function has access to the parentsHeaders, errorHeaders, actionHeaders, and loaderHeaders objects to update document headers based on the headers added via parent...