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