Next.js로 React 서버 컴포넌트 렌더링하기

React 서버 컴포넌트는 서버와 클라이언트 모두에서 RSC 페이로드, 조정, 수화 등의 프로세스를 통해 렌더링됩니다.

### Next.js로 React 서버 컴포넌트의 렌더링 프로세스 이해하기
* 🧠 컴포넌트의 개념은 **데이터를 프로퍼티로 수신**하고 내부 데이터를 상태로 관리하여 궁극적으로 **JSX를 반환**하는 것입니다.
* 🔮 React 서버 컴포넌트는 **서버에서 호출하고 실행할 수 있는 React 컴포넌트의 확장**입니다.
* 🌌 Next.js는 경로 세그먼트와 서스펜스 경계를 기반으로 렌더링 작업을 분할하여 **서버 컴포넌트를 렌더링하는 React API**를 사용합니다.
* 💼 React는 서버 컴포넌트를 클라이언트에서 브라우저를 업데이트하기 위해 컴팩트한 바이너리 표현인 **"React 서버 컴포넌트 페이로드"**로 렌더링합니다.
* RSC 페이로드에는 **서버 컴포넌트 결과, 클라이언트 컴포넌트 렌더링을 위한 플레이스홀더, 클라이언트 컴포넌트 자바스크립트 파일에 대한 참조**가 포함됩니다.
* 🚪 Next.js는 경로를 방문할 때 렌더링된 HTML을 미리보기로 즉시 표시한 다음 **RSC 페이로드를 사용하여 클라이언트 컴포넌트 트리를 서버 컴포넌트 트리와 조정**합니다.
* 💧 하이드레이션은 **자바스크립트 명령어를 가져와 컴포넌트를 인터랙티브하게 만드는 과정**입니다.
* 🔗 Next.js와 React는 각각 필요한 API를 호출하며, **Next.js는 렌더링 프로세스를 위한 오케스트레이터 역할**을 합니다.

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

React 서버 컴포넌트의 렌더링 이해하기

React에서 컴포넌트의 개념은 프로퍼티와 내부 상태를 통해 관리되는 JSX로 데이터를 수신하고 반환하는 것을 포함합니다.

React의 렌더링에는 JSX를 반환하는 프로세스가 포함되며, 이는 React 엘리먼트로 트랜스파일되어 궁극적으로 Fiber를 통해 가상 DOM 노드가 됩니다.

React 서버 컴포넌트의 렌더링은 서버에서 호출되고 실행되는 컴포넌트의 역할을 확장하여 기존 클라이언트 측 컴포넌트와 구분합니다.

React 서버 컴포넌트 렌더링 및 처리에서 Next.

js는 경로 세그먼트와 서스펜스 경계를 기반으로 렌더링 작업을 청크로 분할하여 서버 컴포넌트를 렌더링하는 데 React API를 사용합니다.

React 서버 컴포넌트(RSC) 페이로드에는 서버에서 렌더링된 결과, 클라이언트 컴포넌트 렌더링을 위한 플레이스홀더, 클라이언트 컴포넌트의 JavaScript 파일에 대한 참조가 포함됩니다.

이 페이로드는 모든 서버 컴포넌트를 처리하고 클라이언트에 전달하여 렌더링 프로세스의 첫 번째 단계 역할을 담당합니다.

js 렌더링 프로세스에서 RSC 페이로드의 역할

RSC 페이로드는 클라이언트 컴포넌트 트리와 Next.

js의 서버 컴포넌트 트리를 조정하는 조정 단계에 사용됩니다.

RSC 페이로드는 빈 플레이스홀더를 채우고 클라이언트 컴포넌트 렌더링 위치를 표시하는 데 매우 중요합니다.

이 조정 프로세스는 궁극적으로 가상 DOM과 실제 DOM의 업데이트로 이어지며, 이는 Next.

js 렌더링 프로세스의 두 번째 단계로 작용합니다.

React 서버 컴포넌트에서 수분 공급의 세 번째 단계

React 서버 컴포넌트 프로세스의 세 번째 단계는 하이드레이션으로, 자바스크립트 명령어를 사용하여 컴포넌트를 대화형으로 만드는 데 사용됩니다.

하이드레이션은 HTML 불러오기, 조정 및 React 트리 구성이 포함된 서버 컴포넌트 렌더링의 전체 흐름의 일부입니다.

제공된 코드에는 클라이언트 컴포넌트를 선언하고, 상태를 관리하고, 상호작용을 위한 이벤트 핸들러를 추가하는 간단한 예제가 포함되어 있습니다.

js에서 서버 컴포넌트를 렌더링하는 과정

js는 서버 컴포넌트를 렌더링하고 이를 자바스크립트 명령어와 결합하여 HTML을 생성합니다.

그런 다음 결합된 HTML을 활용하여 클라이언트 요청에 즉각적인 응답을 제공합니다.

RSC 페이로드는 그 값을 자세히 설명하기 위해 분해되고, 하이드레이션 단계에서는 나머지 자바스크립트 명령어를 활용하여 상호작용을 가능하게 합니다.

클라이언트 측 하이드레이션에서 Nex.

value 함수에 onClick 이벤트 핸들러를 로깅하면 콘솔에서 추적하는 데 도움이 됩니다.

정적 폴더 내부의 분할된 자바스크립트 청크는 클라이언트 측에 수분을 공급하고 상호 작용을 활성화하는 역할을 합니다.

js는 렌더링과 서버 컴포넌트에 필요한 API를 분리하고 호출하는 데 중요한 역할을 합니다.