Assets and Metadata Handling

So far, we’ve practiced routing, data loading and mutations, handling errors, and managing state and sessions in Remix. However, building for the web also involves managing static assets to ensure a smooth and efficient user experience.

In this chapter, we will learn how to manage static assets and meta tags in Remix. This chapter is split into three sections:

• Using meta tags in Remix
• Handling fonts, images, stylesheets, and other assets
• Exposing assets with loader functions

First, we will use Remix’s meta export to create dynamic meta tags based on loader data. Next, we will investigate how to expose static assets in Remix. We will create a robots.txt file, add a custom font, and experiment with nested stylesheets. After that, we will discuss managing images in Remix. Finally, we will see how we can create assets dynamically in loader functions.

After reading this chapter, you will understand how to work with...