<div id="readability-page-1" class="page"><div><h2 id="server-component-에-대해">Server Component 에 대해</h2>
1편에서 RSC에 대해 대략적으로 살펴봤다면, 다음으로 Server Component에 대해 알아보자.
<h2 id="1-async-components">1. Async Components</h2>
이제, RSC가 서버에서 실행되므로, 각 컴포넌트 내부에서 직접 데이터 요청이 가능하다. 
가령, 목록 api에서 조회하던 데이터를 직접 컴포넌트에서도 조회할 수 있게 되는 것인데 <code>GET /rsc/:shipId?</code>를 살펴보면
<img src="https://velog.velcdn.com/images/dongha1992/post/e36d9a0d-6974-4681-913c-714ce4ee2e6c/image.png">
여기서 <code>getShip</code>이나 <code>searchShip</code>은 DB 조회를 모방한 함수로써, <code>shipData</code>에 접근하여 데이터를 조회한다. (네트워크 지연 같은 상황도 모방)
<img src="https://velog.velcdn.com/images/dongha1992/post/e3aa725e-2da3-4f60-a646-868dea7831d6/image.png">
<img src="https://velog.velcdn.com/images/dongha1992/post/cee0b982-2314-45d4-93cc-424ead13736e/image.png">
이제 <code>getShip</code>를 서버 컴포넌트에서 호출할 수 있는 것이다.
<h3 id="11-serverappjs">1.1 /server/app.js</h3>
위에서 언급한대로 GET api에서 (흉내낸)DB 조회 함수를 지운다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/532306e1-3576-4132-b0dc-3fc068e97c91/image.png">
<h3 id="12-clientappjs">1.2 /client/app.js</h3>
그렇다면 이제 <code>App.js</code>도 데이터 조회의 결과를 props로 받을 필요 없으니 <code>ship, shipResults</code>를 props에서 제거한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/ccbf6e8e-d81a-48a2-97fc-e8b375babff4/image.png">
<h3 id="13-clientsearchresultsjs">1.3 /client/SearchResults.js</h3>
<code>SearchResults</code>에서 직접 DB를 조회하자. 
<img src="https://velog.velcdn.com/images/dongha1992/post/bc3a0308-dc01-4570-8b7a-3d1a3dfbe9ab/image.png">
<code>SearchResults</code> 컴포넌트는 검색 결과에 따라서 리스트가 나오는 좌측 부분이다.
<img src="https://velog.velcdn.com/images/dongha1992/post/daa93434-c3d3-42de-8732-1e8e61a84917/image.png">
컴포넌트에 <code>async</code> 키워드를 붙이고 DB 접근 함수를 호출하면 된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/e1b6601a-a1d5-47eb-8911-71e4cd83701c/image.png">
마찬가지로 Detail 컴포넌트에서도 직접 조회가 가능하다. Detail은 우측에 이미지가 나오는 부분이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/1b43e7f0-7014-4848-8b63-d172c9125b85/image.png">
동일하게 DB 직접 조회로 코드를 변경했다. 
<h2 id="2-streaming">2. Streaming</h2>
이제 우리는 데이터가 필요한 컴포넌트에서 각각 DB 조회를 하여 데이터를 패칭할 수 있도록 변경했다.
하지만, 문제가 생겼는데 이 중 하나라도 데이터 페칭이 지연되면 전체 앱이 느리게 렌더링 된다는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/664c64a7-c7a7-4575-96e4-49286383b259/image.png">
<code>searchShip</code>에 딜레이를 추가하고 다시 앱을 실행시켜보면
<img src="https://velog.velcdn.com/images/dongha1992/post/a85a7751-88f5-4e9b-ade1-94b717391721/image.gif">
<code>searchShip</code>가 완료되기 전까지 전체 앱이 렌더링되지 않는 것을 확인할 수 있다. 
서버 컴포넌트가 서버에서 독립적으로 async로 데이터 요청을 해서 병렬인가? 싶지만 사실 병렬이 아니다. 
RSC는 기본적으로 전체 리액트 트리 완료 후 RSC payload 스트리밍을 하려고 하기 때문에 모든 컴포넌트가 준비될 때까지 기다리는 것이다. 
이 문제를 해결하기 위해 Suspense를 사용해야 한다. Suspense를 통해 먼저 준비된 부분부터 스트리밍 가능하다. 
<h3 id="21-suspense">2.1 Suspense</h3>
<code>SearchResults</code>와 <code>ShipDetails</code> 각각 Suspense를 해주자.
<img src="https://velog.velcdn.com/images/dongha1992/post/14b8bf45-c370-4679-9ae6-6895f017fd9d/image.png">
번들러가 없기 때문에 <code>createElement</code>를 직접 사용해서 조금 난해해보이지만 <code>createElement(Component, props, child1, child2, child3...)</code> 라는 걸 인지하면 
<pre><code>&lt;Suspense fallback={&lt;SearchResultsFallback /&gt;}&gt;
	&lt;SearchResults shipId={sihpId} search={search} /&gt;
&lt;Suspense/&gt; </code></pre>
와 동일하다. 
이제 다시 앱을 확인하기 전에 RCS Payload가 어떻게 스트리밍 되는지 api를 먼저 확인해보자. 
<h4 id="211-suspense-with-스트리밍">2.1.1 Suspense with 스트리밍</h4>
<code>renderToPipeableStream</code>가 반환하는 <code>pipe</code> 에서 RSC Payload를 어떻게 스트리밍하는지 보자.
해당 api인 <code>http://localhost:4000/rsc/3ba8aa65ffe6c</code>를 브라우저에서 보면 Payload 청크가 3번에 나눠서 스트리밍되는 것을 알 수 있다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/858178af-12c0-48bd-94f8-12516b7b3aa3/image.gif">
호출하자마자 처음부터 있는 가장 큰 청크인 이니셜 청크는 <code>Root</code>에 대한 청크다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/e7fe27eb-9851-4d4e-94da-e797963f31d3/image.png">
그 다음 스트리밍되는 청크가 딜레이가 없는 Detail 컴포넌트고
<img src="https://velog.velcdn.com/images/dongha1992/post/e70bb526-b5cb-46cb-9508-ea5abb2b3da5/image.png">
마지막으로 4초 뒤에 만들어지는 청크가 delay 4초를 추가한 SearchResults 컴포넌트다
<img src="https://velog.velcdn.com/images/dongha1992/post/7a4fcebd-d467-4266-9a69-5c4ad1cda1c4/image.png">
그럼 앱을 실행시켜서 화면 동작을 확인해보자. 
<img src="https://velog.velcdn.com/images/dongha1992/post/85019c93-c7a3-49f4-bf89-c8a6734aa603/image.gif">
RCS Payload 스트리밍에서 본 것처럼 데이터가 준비되는 순서로 스트리밍 하고 지연된 컴포넌트만 Suspense에 걸리는 것을 확인할 수 있다. 서버 컴포넌트와 Suspense 조합으로 Cascading waterfalls 해결할 수 있다.
<h2 id="3-server-context">3. Server Context</h2>
1편에서 말했듯 RSC에선 상태 관리를 하지 못 한다. stateless니, 메모리니 이런 이유들을 제쳐두고서라도 느낌적으로 서버에선 hook 같은 기능을 사용하지 못할 것 같다.
하지만 컨텍스트로 상태를 관리하고 싶은 충동이 들 때도 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/4d47d5e4-2ebe-4819-b64c-0770a72127b3/image.png">
가령, <code>shipId</code>, <code>search</code>같은 파라미터을 props가 아니라 전역 컨텍스트로 관리한다면 프롭스 드릴링을 줄일 수 있을 텐데 말이다!
그래서 사용할 수 있는 Node.js의 기능으로 <code>AsyncLocalStorage</code>가 있다.
<h3 id="31-asynclocalstorage">3.1 AsyncLocalStorage</h3>
<a href="https://nodejs.org/api/async_context.html#new-asynclocalstorageoptions">AsyncLocalStorage</a>는 마치 클라이언트 훅에 useContext처럼 컨텍스트를 공유할 수 있는 기능이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/43e65392-6eb3-4c3f-ab51-91e566e38762/image.png">
<code>AsyncLocalStorage</code> 인스턴스를 하나 만들고 이제 api의 파라미터를 컨텍스트 안에 추가하면 된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/4f7301ee-fe40-43b0-8fff-85ae78b8b8d2/image.png">
<code>run</code>의 콜백 안에서는 모든 컴포넌트가 동일한 컨텍스트에 접근 할 수 있다.
<img src="https://velog.velcdn.com/images/dongha1992/post/6cf3e86a-9cb9-44e9-9f47-118b5a570fa7/image.png">
이렇게 첫 번째 인자에 공유할 데이터를 명시하고, 콜백 안에서 <code>pipe</code>를 실행시키면 된다. 
<h3 id="31-client">3.1 Client</h3>
이제 <code>App</code>에서 받던 props가 없으니 클라이언트 코드를 수정하면 된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/5dfd5471-d8cb-4f49-b6fa-6652ac240a8f/image.png">
<code>getStore</code>를 통해 서버에서 받은 파라미터를 공유할 수 있게 된다. 동일하게 <code>shipID</code>, <code>search</code>를 소비했던 컴포넌트들도 props가 아니라 <code>AsyncLocalStorage</code>로 컴포넌트에서 직접 조회하도록 수정하면 된다.(생략)
<h2 id="4-정리">4. 정리</h2>
이로써 RSC가 해결하고자 했던 Cascading waterfalls와 Prop drilling 가 서버 컴포넌트로 해결되었다. 서버 컴포넌트는 이만 마무리하고 클라이언트 컴포넌트를 살펴보자. (AsyncLocalStorage 신기하다)
참고 : <a href="https://www.epicreact.dev/">epic-react</a></div></div>

삶도 재입학이 되나요?

Server Component 에 대해
1편에서 RSC에 대해 대략적으로 살펴봤다면, 다음으로 Server Component에 대해 알아보자.
1. Async Components
이제, RSC가 서버에서 실행되므로, 각 컴포넌트 내부에서 직접 데이터 요청이 가능하다. 
가령, 목록 api에서 조회하던 데이터를 직접 컴포넌트에서도 조회할 수 있게 되는 것인데 GET /rsc/:shipId?를 살펴보면
여기서 getShip이나 searchShip은 DB 조회를 모방한 함수로써, shipData에 접근하여 데이터를 조회한다. (네트워크 지연 같은 상황도 모방)
이제 getShip를 서버 컴포넌트에서 호출할 수 있는 것이다.
1.1 /server/app.js
위에서 언급한대로 GET api에서 (흉내낸)DB 조회 함수를 지운다. 
1.2 /client/app.js
그렇다면 이제 App.js도 데이터 조회의 결과를 props로 받을 필요 없으니 ship, shipResults를 props에서 제거한다. 
1.3 /client/SearchResults.js
SearchResults에서 직접 DB를 조회하자. 
SearchResults 컴포넌트는 검색 결과에 따라서 리스트가 나오는 좌측 부분이다.
컴포넌트에 async 키워드를 붙이고 DB 접근 함수를 호출하면 된다. 
마찬가지로 Detail 컴포넌트에서도 직접 조회가 가능하다. Detail은 우측에 이미지가 나오는 부분이다. 
동일하게 DB 직접 조회로 코드를 변경했다. 
2. Streaming
이제 우리는 데이터가 필요한 컴포넌트에서 각각 DB 조회를 하여 데이터를 패칭할 수 있도록 변경했다.
하지만, 문제가 생겼는데 이 중 하나라도 데이터 페칭이 지연되면 전체 앱이 느리게 렌더링 된다는 것이다. 
searchShip에 딜레이를 추가하고 다시 앱을 실행시켜보면
searchShip가 완료되기 전까지 전체 앱이 렌더링되지 않는 것을 확인할 수 있다. 
서버 컴포넌트가 서버에서 독립적으로 async로 데이터 요청을 해서 병렬인가? 싶지만 사실 병렬이 아니다. 
RSC는 기본적으로 전체 리액트 트리 완료 후 RSC payload 스트리밍을 하려고 하기 때문에 모든 컴포넌트가 준비될 때까지 기다리는 것이다. 
이 문제를 해결하기 위해 Suspense를 사용해야 한다. Suspense를 통해 먼저 준비된 부분부터 스트리밍 가능하다. 
2.1 Suspense
SearchResults와 ShipDetails 각각 Suspense를 해주자.
번들러가 없기 때문에 createElement를 직접 사용해서 조금 난해해보이지만 createElement(Component, props, child1, child2, child3...) 라는 걸 인지하면 
<Suspense fallback={<SearchResultsFallback />}>
 <SearchResults shipId={sihpId} search={search} />
<Suspense/> 
와 동일하다. 
이제 다시 앱을 확인하기 전에 RCS Payload가 어떻게 스트리밍 되는지 api를 먼저 확인해보자. 
2.1.1 Suspense with 스트리밍
renderToPipeableStream가 반환하는 pipe 에서 RSC Payload를 어떻게 스트리밍하는지 보자.
해당 api인 http://localhost:4000/rsc/3ba8aa65ffe6c를 브라우저에서 보면 Payload 청크가 3번에 나눠서 스트리밍되는 것을 알 수 있다. 
호출하자마자 처음부터 있는 가장 큰 청크인 이니셜 청크는 Root에 대한 청크다. 
그 다음 스트리밍되는 청크가 딜레이가 없는 Detail 컴포넌트고
마지막으로 4초 뒤에 만들어지는 청크가 delay 4초를 추가한 SearchResults 컴포넌트다
그럼 앱을 실행시켜서 화면 동작을 확인해보자. 
RCS Payload 스트리밍에서 본 것처럼 데이터가 준비되는 순서로 스트리밍 하고 지연된 컴포넌트만 Suspense에 걸리는 것을 확인할 수 있다. 서버 컴포넌트와 Suspense 조합으로 Cascading waterfalls 해결할 수 있다.
3. Server Context
1편에서 말했듯 RSC에선 상태 관리를 하지 못 한다. stateless니, 메모리니 이런 이유들을 제쳐두고서라도 느낌적으로 서버에선 hook 같은 기능을 사용하지 못할 것 같다.
하지만 컨텍스트로 상태를 관리하고 싶은 충동이 들 때도 있다.
가령, shipId, search같은 파라미터을 props가 아니라 전역 컨텍스트로 관리한다면 프롭스 드릴링을 줄일 수 있을 텐데 말이다!
그래서 사용할 수 있는 Node.js의 기능으로 AsyncLocalStorage가 있다.
3.1 AsyncLocalStorage
AsyncLocalStorage는 마치 클라이언트 훅에 useContext처럼 컨텍스트를 공유할 수 있는 기능이다. 
AsyncLocalStorage 인스턴스를 하나 만들고 이제 api의 파라미터를 컨텍스트 안에 추가하면 된다. 
run의 콜백 안에서는 모든 컴포넌트가 동일한 컨텍스트에 접근 할 수 있다.
이렇게 첫 번째 인자에 공유할 데이터를 명시하고, 콜백 안에서 pipe를 실행시키면 된다. 
3.1 Client
이제 App에서 받던 props가 없으니 클라이언트 코드를 수정하면 된다. 
getStore를 통해 서버에서 받은 파라미터를 공유할 수 있게 된다. 동일하게 shipID, search를 소비했던 컴포넌트들도 props가 아니라 AsyncLocalStorage로 컴포넌트에서 직접 조회하도록 수정하면 된다.(생략)
4. 정리
이로써 RSC가 해결하고자 했던 _Cascading waterfalls_와 _Prop drilling _가 서버 컴포넌트로 해결되었다. 서버 컴포넌트는 이만 마무리하고 클라이언트 컴포넌트를 살펴보자. (AsyncLocalStorage 신기하다)
참고 : epic-react

Epic React - React Server Component (2)

댓글