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

Technical requirements

We need to update some code before we can get started with this chapter. Please follow the steps in the README.md file in this chapter’s folder on GitHub before continuing. You can find the code for this chapter here: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/tree/main/13-deferring-loader-data.

Streaming data to the client

There are several different data-fetching strategies. We can initiate data fetching on the client using client-side fetch requests or execute data fetching on the server to take advantage of server-side rendering. We can even fetch data during build time for static site generations. In this section, we will discuss the trade-offs of server-side data fetching and review the requirements of HTTP streaming.

Motivating server-side data fetching and streaming

Remix promotes fetching data on the server using loader functions for each route, as opposed to fetching data at the component level. During the initial page load, the loader functions are called before React renders on the server. This guarantees that the loader data is available for the server-side rendering step, eliminating the need for client-side data-fetching logic and loading states.

When initiating data fetching on the client, we first need to load the HTML document and then wait for the...

Deferring loader data

Not all payloads are equally important to the user. Some data may only appear below the page’s fold and is not immediately visible to the user. Other information may not be of primary content of the page but slow down the initial page load. For example, we may want to prioritize displaying the product information for an e-commerce site as fast as possible. However, we might be okay deferring the loading of the comments section to speed up the initial page load time. For this, Remix provides the defer and Await primitives. In this section, we will utilize Remix’s primitives with React Suspense in BeeRich to defer specific loader data.

Please review the README.md file on GitHub for this chapter if you haven’t already: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/tree/main/13-deferring-loader-data/bee-rich/README.md. This file will guide you through setting up the new expense and invoice changelog. Now, let’...

Summary

In this chapter, you learned that Remix supports different data-fetching strategies. Deferring loader data can be utilized to resolve performance bottlenecks in your Remix apps when fetching from slow endpoints. Remix’s defer function detects unresolved promises in the loader data and streams them to the client once resolved. React Suspense and Remix’s Await component are used to manage the deferred loader data in React.

You also learned that using defer requires fallback UIs to communicate loading states. You now understand that using defer comes with trade-offs that impact the user experience. On one hand, deferring loader data can speed up the initial document request. On the other hand, using defer creates loading UIs, which results in a different user experience.

After reading this chapter, you know that Remix uses React streaming to speed up document requests. However, React and HTTP streaming are not supported on all server runtimes and environments...

Further reading

You can read more about the Streams API via MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/Streams_API.

The Remix documentation includes a guide for streaming and defer: https://remix.run/docs/en/2/guides/streaming.

The defer function’s documentation can be found here: https://remix.run/docs/en/2/utils/defer.

In this chapter, we discussed core web vitals. You can read more about core web vitals, such as LCP, here: https://web.dev/vitals/.