Deferring Loader Data

Executing data loading on the server can speed up initial page load times and improve core web vitals such as Largest Contentful Paint (LCP). However, server-side data fetching can also become a bottleneck if a request is particularly slow. For such cases, Remix provides an alternative data-fetching approach.

In this chapter, we will work with Remix’s defer function and learn how to utilize HTTP and React streaming, React Suspense, and Remix’s Await component to defer slow loader data requests. This chapter is split into two sections:

• Streaming data to the client
• Deferring loader data

First, we will discuss the trade-offs of server-side data fetching and review the requirements for working with Remix’s defer function. Next, we will utilize Remix’s defer function in BeeRich and practice working with React Suspense and Remix’s Await component.

After reading this chapter, you will know how to use defer to...