Caching Strategies

“There are only two hard things in computer science: cache invalidation and naming things.” – Phil Karlton

Caching can significantly enhance a website’s performance by eliminating or shortening network roundtrips and reusing previously stored data and content. However, caching is also hard to get right. As usual, Remix provides a thin abstraction layer on top of the web platform and eases the usage of HTTP caching strategies.

In this chapter, we will learn about different caching strategies and how to utilize them with Remix. This chapter is divided into two sections:

• Working with HTTP caching
• Exploring in-memory caching

First, we will learn about HTTP caching. We will study different HTTP caching headers and see how we can utilize HTTP caching in the browser and with CDNs. Next, we will focus on in-memory caching. We will refer to Chapter 3, Deployment Targets, Adapters, and Stacks, to understand when and where...

Technical requirements

You can find the code for this chapter here: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/tree/main/12-caching-strategies. You can go ahead and use the end solution from the previous chapter. No additional setup steps are required for this chapter.

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...

Exploring in-memory caching

Caching effectiveness increases the closer the cache is to the users. In-browser caching avoids network requests altogether. CDN-based caching can significantly shorten network requests. However, we may also give up more control over the cache the further it is away from our Remix server.

In this section, we will discuss in-memory caching strategies and learn about the advantages and disadvantages of in-memory caching options.

HTTP caching might not always be the right strategy. For instance, we already discussed privacy issues when caching user-specified information. In some cases, it might make sense to implement a custom caching layer on the web server.

The easiest way is to store computation results or fetched responses in memory on the server itself. However, as we learned in Chapter 3, Deployment Targets, Adapters, and Stacks, this may not always be possible. Runtime environments such as the edge and serverless may shut down after every request...

Summary

In this chapter, you learned about different caching strategies and how to implement them with Remix.

Remix’s headers route module API export lets us specify HTTP headers for the HTML document on a per-route level. We also have access to loaderHeaders and parentHeaders, which allows us to merge HTTP headers and specify headers based on the loader data.

You also learned how to cache both document and data requests in Remix. You learned how to use the Cache-Control header to specify and prevent caching.

Then, you applied the private, public, max-age, no-cache, and immutable directives. Additionally, you reviewed how Remix implements HTTP caching for static assets out of the box.

Next, you learned about the privacy concerns of caching user-specific data and how to use ETags to avoid downloading full responses while sending requests to the server where the user authorization can be checked.

Finally, we discussed in-memory caching and using services such as...

Further reading

You can learn more about CDNs in the MDN Web Docs: https://developer.mozilla.org/en-US/docs/Glossary/CDN.

You can also find an overview of HTTP caching concepts in the MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching.

The MDN Web Docs also provide detailed information about each HTTP caching header:

• ETag: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag
• Cache-Control: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

Refer to the Remix documentation for more information about Remix’s headers route module API: https://remix.run/docs/en/2/route/headers.

Ryan Florence recorded two great videos about caching on the Remix YouTube channel. Fun fact – they were the very first videos that were uploaded on the Remix YouTube channel, and they are worth checking out:

• Remix Run – Introduction to HTTP Caching: https://www.youtube.com/watch?v=3XkU_DXcgl0
• CDN Caching...