MFS202 : Table of Contents

Chapter 3

Lesson 4

React 18 Streaming: Make your app even faster by streaming it

Harness the power of React 18's new streaming capabilities and unlock a whole new level of performance optimization for your Remix app. In this lesson, you'll discover how to use these cutting-edge features and what tradeoffs are involved

Quiz it to win it

Take the quiz

4 Questions
15 XP

Typically, in server-side rendering, data for an entire page is fetched in a single, sequential process. This approach, while straightforward, can lead to inefficiencies, especially for data-heavy pages. The server fetches all necessary data, renders the page, and then sends the complete HTML to the browser.

In contrast, Remix applications adopt a more dynamic approach. Based on the URL and the structure of nested routes, Remix intelligently determines the specific data chunks needed for a page. It then fetches these loader data in parallel, thus significantly cutting down the total time required for the server to get the full-page data.

Pro Tip

If you need a refresher on nested routes in Remix, revisit the lesson where talk about it in detail. This concept is pivotal in understanding the efficiency gains we discuss here.

Building upon these capabilities, we can further boost performance through Streaming. Introduced in React 18, Streaming is a technique where the server sends HTML to the browser in segments as they become available. This method contrasts with traditional server-side rendering, where the server waits for the entire page to be fully rendered before transmission. Streaming is particularly advantageous for pages demanding extensive data retrieval from slower APIs.

Streaming in React is made possible with the Suspense API. It provides a way for components to 'suspend' their rendering while waiting for certain conditions to be met, such as the arrival of data or resources. This means that instead of the traditional method where the server has to wait for all components and data to be ready before sending the HTML to the browser, with Suspense and streaming, the server can send chunks of HTML as they become ready.

Implementing Streaming in Remix

Loading image...

Diagram showing the flow of a Traditional Server Side Rendered Website

Get started for free today!

No commitments. No contracts. Enjoy all features for a day — join in just three clicks!

No credit card required.

Quiz it to win it

Complete this quiz successfully to proceed to the next lesson and win upto 15XP.

Start quiz for this lesson

Completing this quiz will get you

+15 Experience Points

+9% course progress