As we delve deeper into the depths of React Server Components (RSC), I’m going do my best to give you all the background information you need to truly understand each part of the code. Hopefully, the last chapter cemented the basic concept of React Server Components (RSC) in your mind and helped you see how it differs from Server Side Rendering (SSR). It’s important to fully grasp this distinction as we move forward. This is not the only background knowledge that you need, however. Before we get into the heart of the React Server Component codebase, it’s essential that we understand the types of problems that it was built to solve.
RSC’s adopt a whole host of clever tricks which use some of the more obscure features of the Web Platform. So, we’ll need to cover some of these advanced concepts first to understand how they work. There are a few more chapters like this later, too. I know it might be frustrating to not dive headfirst into the React codebase, but a thorough knowledge of these concepts is key to understanding how RSC’s actually work. I’ve worked really hard to put together a bunch of demos that make it all very clear. I will also be establishing some basic RSC knowledge to which I will refer throughout the series.
In this chapter, we’re going to be discussing asynchronous code on the web. I mean, have you ever thought about what that really means? We hear terms like single-threaded and event loop thrown around a lot, but it seems like relatively few developers take the time to understand what’s really happening under the hood. To answer this question, we’ll weave a narrative based on the history of computing itself. We’ll frame it as the journey from the Turing Machine to modern APIs.
Primarily, we’ll focus on the road to promises in JavaScript, how promises work, and how React uses them. We will also explore serialization in general, and how this has led to the JSON Replacer and Reviver functions which React uses extensively in their streaming process. Finally, we’ll examine how the fetch method encapsulates the evolution of many of these concepts as a deceptively simple interface for efficiently streaming dynamic, asynchronous data with JavaScript. This will naturally lead us into our next chapter on Streams.
So, let’s explore the history of the web and the internal mechanisms of JavaScript runtimes to start understanding how React deftly conducts an orchestra of modern web APIs to make server components work.