Rendering React Server Components with Next.js

React server components are rendered through a process involving RSC payload, reconciliation, and hydration on both server and client.

### Understanding the Rendering Process of React Server Components with Next.js
* 🧠 The concept of components is that they receive data as props and manage internal data as state, ultimately returning **JSX**.
* 🔮 React server components are an extension of React components that can be called and executed on the **server**.
* 🌌 Next.js uses the React API to render server components, splitting the rendering work based on **route segments** and **suspense boundaries**.
* 💼 React renders server components as a "**React Server Component Payload**," a compact binary representation to **update the browser from the client**.
* The RSC payload includes the **server component result**, **placeholders for client component rendering**, and **references to client component JavaScript files**.
* 🚪 Next.js immediately shows the rendered HTML when visiting a route as a preview, and then **reconciles the client component tree with the server component tree** using the RSC payload.
* 💧 Hydration is the process of bringing JavaScript instructions to make **components interactive**.
* 🔗 Next.js and React each call necessary APIs, with Next.js acting as an **orchestrator for the rendering process**.

Hello everyone, I have watched it. Today, I am going to take a close look at how React server components are rendered by looking at the Next.js official website together. First, I will explain the concept based on the process mentioned on the official website. After explaining the concept, I will briefly show you a very simple example code. By looking at that code and providing some supplementary explanations based on the code, I believe I can help you understand better. First of all, let's start with the concept explanation. Before explaining the rendering of React server components, we need to first define what a component is. Do any of you remember the definition when it comes to components? In fact, I have explained this several times on my YouTube channel, so some of you may already be familiar with it. Let's revisit it once more. So, what is a component?

In the end, you receive data. You receive data as an argument, and what do you do with the data? You return it. What do you return? You return JSX. This is a JavaScript function. This is a component, right? So, since you receive data as an argument, you have props. However, there is also internal data. This data is managed as state. This much explanation should be enough for defining this component. When we say this component is rendered, you probably already know the meaning. I have explained it once, but I will briefly review it and move on. Rendering means returning like this with tags. However, although it returns in JSX, when it meets Babel, it gets transpiled. So, through Babel, what happens to this JSX? It becomes React.

What is a React element? It's an object in JavaScript. So, what kind of information does it contain? It contains information necessary to represent what to show in the DOM related to a component. So, when a React element is expanded, what did I say it becomes? Right, it becomes Fiber. And what is Fiber ultimately in the node of what? In the virtual DOM node. Therefore, it is a framework composed of Fiber. I explained this process for a year, so ultimately, what is component rendering? We generally think that re-rendering means calling the function again, calling the component again, but it doesn't mean that. It refers to the overall process. When a component is called, it returns JSX.

So, through this JSX Babel, ultimately, it becomes a React element. So, what this component returns is ultimately a React element or, in other words, a structure of a JavaScript object. So, in the end, it becomes a virtual DOM. Up to this point, we have explained the process we call rendering, which we have been through for a year. This is the definition of component rendering. Why did I touch upon this? Because now we are going to study the rendering of not just the client but the React server. We need to understand the differences. So, I briefly touched upon what the existing component rendering is. Then, what is the existing component? Well, this is from Dan Abramov, a very famous person in the React community who created Redux.

What he explained now is that originally in React, there was only one component. Therefore, when this component is rendered, this component is just a React component. This is extended to a server component, an extended concept. The role of the component has been expanded so that it can be called and executed on the server. Therefore, since the existing component was called a client component, now there is a difference. So, the component rendering I have been explaining so far can be seen as client component rendering. Because if you think about where this happens, it's on the client side, so it's easy to understand. So, if you have come this far, now let's talk about rendering React server components together.

I'm trying to see, but in the end, to explain this process, you need to organize what's on the left side of the official website a bit. So, if you look, it says how are sub components rendered, so first of all, on the server, that's where it's currently running. It's running on the server. But it says it uses Next.js and React API. You all must already know Next.js well. When you ask what this is, it's a framework for React. In other words, if you view React as a framework, calling Next.js the meta framework is also used. However, if you see React as a library, Next becomes something additional to help your understanding. Ultimately, Next.js is using React to do something. That's why it also uses the React API here to render.

The thing called rendering that is used for this, when I say rendering, as you can see here, it gets split into chunks. It gets split into chunks based on what criteria? There is a criterion for splitting. The first criterion is route segment. Those who have used Next.js a lot would know this well. It refers to the routing that Next.js provides by default. It divides into chunks based on page conventions. And the second one is suspense boundary. It splits based on these two criteria. So, what gets divided into chunks in the rendering work? So, we briefly looked at the criteria for dividing the rendering work, and then divided into these divided rendering works.

How do you handle chunks? When you look at this, I'll explain a bit. When you see it, React appears. It's number one. If you look at number one, React renders server components. React renders server components in a special data format called the React Server Component Payload. So, React renders server components in a special data format. What do they render with? It's a step in rendering. Ultimately, it renders the RSC payload. But what is the RSC payload? Below, there is an explanation. Let's briefly look at this explanation first. When you look at it, it says RSC payload is a compact binary representation.

This is how it comes out, but this is binary, but just by looking at it, you may not understand what it is about. However, if we touch on the key points and move on, Binary React is to draw the React server component tree. In order to update help to the browser from the client, then, explaining what the React server component payload RSC payload includes and the components of the RSC payload. Basically, there is the result rendered on the server component, and of course, this is included in the RSC payload by default. Secondly, if you look at the placeholder, it means something like an empty space, indicating an empty space. What is the empty space? It indicates where the client component will be rendered, where the client component will be rendered.

The render location of the client component may not be visible, so this is the render location of the client component. And as you can see here, it's also the reference. The location of their JavaScript file is the reference for the client component, indicating the empty space where you can refer to the JavaScript file. This is now the placeholder, which is also included in the RSC payload. Another thing, any PS, all PS, all PS are handled by this server component, and the server component delivers them to the client component, the PS. It includes these three things, which is precisely the RSC payload. In other words, the first step, all of this, the first step of all server components, is React rendering the server component. What does it make? It renders it.

In the end, this is created as an RSC payload, this is number one, it says it renders, and then what is number two? This Nexx uses the RSC payload. React now utilizes the rendered RSC payload from above, and then what else is used? Client component JavaScript instructions are used. Client component JavaScript instructions are used. This is a bunch of JavaScript commands, using this to create what? To create HTML, it renders HTML. Here, the word render is used again. Where does this process take place? It happens on the server, in other words, number one and number two happen on the server. So, to summarize, if you have followed along up to this point, this much happens on the server. Once it is completed up to this point, that is, the HTML is ready, it is rendered, and then.

After rendering the RSC payload, the next step is what happens on the client side. What happens is, in step 1, there is this HTML, the HTML that has been created, show it immediately, show it immediately, show it immediately, prev, so when Next.js visits a route, it shows the HTML immediately as a preview. Later, when we look at the code together, you will understand it better. For now, if you listen to the explanation of the concept once, it might help you understand this process. So, this happens only at the initial page start, at the very beginning of the page, it only happens then because later, when you do client-side routing with Next.js, it doesn't provide this HTML immediately; that's a bit later, I will talk about that again. So, the first thing that happens is to bring and show this HTML as it is. This is exactly what a preview review is.

The review is the preview of the rat. Yes, that's right. Now, as you all know, React Server-Component Payload has become somewhat familiar. The RSC payload is used, what is it used for? It's used for the reconciliation step, which is important. Why is it important? Because the name of this step is already familiar to us. What is it? It's reconciliation. The second step is the reconciliation step that occurs on the client side. When the RSC payload is used, what do we do in reconciliation? We reconcile the client component tree with the server component tree using the RSC payload like this. How do we reconcile? When the HTML is immediately displayed, initially, if you just receive this RSC payload, you will see the empty placeholder. Filling in this placeholder is what completes it.

It's listening because now the client component is empty, as I explained earlier, indicating the location where the client component will be rendered here. This JavaScript file will be needed when the client component is rendered. I explained that marking the empty spaces for what is needed is included in the RSC payload. Therefore, by using the information in this RSC payload that marks the empty spaces, we will proceed with the rendering here. Reconciliation means constructing the tree of the two components, the client component and the server component. In other words, what is this React component tree? It's a virtual DOM, and there is a process of actually updating the DOM. Yes, it also updates the actual DOM. This is the second step.

The second step that happens on the client, so what is the third step? When we look at the third step, the term hydrate comes up, which is a term familiar to all of you. Now, what does it mean to be hydrated? Ultimately, the key of hydration is one thing, making interaction possible. Making interaction possible, what does that mean? What we bring in for that is JavaScript instructions. Where have you heard a lot about instructions? Right, you've heard it from above, it's up here. JavaScript instructions are here. It's the same as this. Here, now, the placeholder default value, for example, the default value that is initially put into the useState here was used for rendering HTML, but the rest of the useState contains state-setting functions, and the code that calls those state functions, that code.

For example, when you click on an event handler button, you can call setState from places like event handlers. Using related JavaScript instructions, we make button components interactive by making button tags interactive. We call this process hydration. This process is the third step. In summary, the client immediately fetches HTML, shows it right away, previews it, then reconciliation happens. Reconciliation results in React tree construction. With client components, server components, and context, we fill in the placeholders. Then, in the third step of hydration, we bring JavaScript instructions to make the components interactive and hydrate them.

This is the overall flow in which the server component is rendered. Through this process, the server component is rendered. If you have seen it up to this point, in the middle, I have shown you the part where the RSC payload is taken and how this tree is reconciled. Also, an explanation of RSC was shown in the client component that I showed you earlier. The server component is now separated, and with this, when we organize it, we fill in the placeholders like this below. Later, filling this in is precisely what the RSC payload is for. This RSC payload is referred to as RSC and format here. But this is JSON and so it comes in this form. I will provide additional explanations on this. What we will look at today is, now that we have studied the theory about this, if we have finished with the concepts, we need to look at the code. So, let's take a look at the code together.

I'm trying to see, I've prepared a very simple code. What part is really simple about the code I prepared? So, if you look at the page now, just with the basic Create Next App, when you get the basics, you'll see a homepage like this. At that time, I declared one client and called it here, like you see, it has a value. I declared a state here, managed the state, then clicked the button and put an event handler. That's all. When this component, the client component, is rendered here, oh, now it's a quiz. What I mean is, when I declared this component here, will the text Client Port be included in the output when it's built? Will it be included in the bundled output when it's built?

Do you have it as you already know? It's in there. So, from now on, I'm going to try to see that together. When you build the file, as you may know, here at the next point, now it's generated at the next point. When the built result is generated, if you host it from the start, you can access it at locker loss 3000, and the accessed result is this. So, if you look at locker loss, if you look at preview, it comes out like this. There is a client component 0. Of course, this doesn't have any interaction. As you can see, this is the framework. What is this? This is exactly what I showed you. What I explained is that React now renders all server components here. So, it created the RSC payload and threw it. So, what is the RSC payload is the client component.

I combined JavaScript instructions to create HTML. This HTML is exactly what I showed you. This HTML, oh, this is what it is. You see, there is no CSS yet. Before that, it's just the HTML skeleton. So, I combined this. What did I combine it with? The JavaScript instructions of the client component. But here, what is a client's '트 자스트 인스' (트 자스트 인스)? If you look at the code, it clearly says 'client component'. But JavaScript instructions are talking about things like this. These JavaScript codes, but if you look, there is a default value, right? There is a 0. This value is inside here. Then, when this value goes in as the value, on the 16th line, 0 goes in. This is how we utilize these JavaScript codes, using JavaScript instructions. We don't use all of them, just some. JavaScript client.

We are utilizing a part of the JavaScript instructions of the component to render, combining HTML with HTML. This combined HTML, which contains a 0, is the JavaScript code we wrote in the client component. It is like the server component composing static HTML, and that's what's included here. In the preview, Next.js does the work, which is done here on the server. There is the combined HTML. Then, when this HTML makes a request to localhost 3000 from the client, it immediately responds, showing the HTML right away. As a preview order route, if it's a certain route, it will be our home route, right? As you can see, it will be the home route. From there, we deliver the prepared content. In this way, as you can see, this HTML is displayed immediately, and then we proceed to the next step, which is to reconsile.

In this step, we will delve into the RSC payload stage. So, as I explained in the blog I showed earlier, I will elaborate a bit more on the actual values of this RSC payload. By dissecting each JSON value one by one, I believe I can provide a more detailed explanation. For now, you can understand it as being merged or consolidated. Then, moving on to the final step, the hydrated stage. In the hydrated stage, as I mentioned, various interactions are made possible. We use JavaScript instructions. By utilizing the remaining JavaScript instructions, the hydrated silica is achieved. That enables interaction. Bringing the remaining JavaScript instructions to the client components, when we talk about JavaScript instructions, it means the remaining JavaScript.

To track handlers called by the onClick event in the value function, I logged this string to the console. If you search for this, you will find it. So, when you search, as you can see, on page 287 f6 DB, etc., you can see what's currently in there. Where is this? It's divided into chunks inside the static next, inside the static folder. If you look inside the app within the chunk, you will find it. Why is this like that? Because fundamentally, this is a page. This page refers to the root page, meaning it has a page name and a hash value corresponding to the route name. This is bundled JavaScript, now split. When you visit the most basic home route segment, this split web brings in the split chunk JS chunk, hydrating it.

Nex is the one doing this. Specifically, here Nex is playing the role of separating. From here, requests are made on the client-side. The file names should be the same. If we look through here, it's right here. Once it's here, it means we have received this script fragment through the network. After receiving it, we will hydrate. When hydrating from the client-side, it means attaching to the onClick button, assigning it. So, when clicked, it enables interaction. What this process is, is hydrate. So, bringing the rest of the JavaScript instructions to make interaction possible, hydrate is done here. So far, I have explained passing through the server and client, and this is where Nex and React, each calling the necessary APIs, Nex calls the React API.

The rendering was an orchestrator process, and as I explained, I'm planning to look for a detailed explanation of the RSC payload in another video. Including that would make the video too long, so today, let's organize. Through the Next.js official website, I learned about How are server components. In fact, how server components are rendered, the process of rendering, I explained that, but to understand this better, it would be helpful to have a good understanding of the fundamentals in this area. So, I'm planning to give a bit more explanation about the fundamentals and also provide a detailed explanation of the RSC payload. Yes, I think this is enough for today. As always, when we grow together, we become a stronger team.

NextJS 에서 서버 컴포넌트를 렌더링하는 방법?!

실력있는 웹개발자가 되기 위해 필요한
자바스크립트, 리액트, 브라우저, 알고리즘, CS 지식을 이해하기 쉽게 설명합니다
또한 frontend engineer 면접 질문에 대한 답변을 깊이 있게 설명합니다


가장 쉬운 웹개발 with Boaz

Understanding the Rendering of React Server Components

The concept of components in React involves receiving and returning data as JSX, managed through props and internal state.

Rendering in React involves the process of returning JSX, which is then transpiled into a React element, ultimately becoming a virtual DOM node through Fiber.

The rendering of React server components expands the role of components to be called and executed on the server, distinguishing them from the existing client-side components.

js in Rendering and Handling React Server Components

js uses the React API to render server components, splitting the rendering work into chunks based on route segments and suspense boundaries.

The React Server Component (RSC) payload includes the result rendered on the server, placeholders for client component rendering, and references for the client component's JavaScript file.

This payload is responsible for handling all server components and delivering them to the client, serving as the first step in the rendering process.

The RSC payload is used for the reconciliation step, which involves reconciling the client component tree with the server component tree in Next.

The RSC payload is crucial in filling in empty placeholders and marking the locations for client component rendering.

This process of reconciliation ultimately leads to the updating of the virtual DOM and the actual DOM, serving as the second step in the Next.

The Third Step of Hydration in React Server Components

The third step in the React Server Components process is hydration, where JavaScript instructions are used to make the components interactive.

Hydration is part of the overall flow of rendering server components, which involves fetching HTML, reconciliation, and React tree construction.

The code provided includes a simple example of declaring a client component, managing its state, and adding an event handler for interactivity.

The Process of Rendering Server Components in Next.

js renders server components and combines them with JavaScript instructions to create HTML.

The combined HTML is then utilized to provide immediate responses to client requests.

The RSC payload is dissected to explain its values in detail, and the hydrated stage enables interactions by utilizing the remaining JavaScript instructions.

Logging the onClick event handlers in the value function helps track them in the console.

The split JavaScript chunks inside the static folder are responsible for hydrating the client-side and enabling interaction.

js plays a crucial role in separating and calling the necessary APIs for rendering and server components.