RSC(React Server Components) 이해하기

최근에 nextjs 13.4가 release되면서 App Router가 Stable 상태가 되었습니다.

관련해서 또 눈에 띄는 것은 React Server Components입니다.

최근 트위터만 봐도 RSC에 대한 내용이 한가득인데, 관련해서 한번 정리하면 좋겠다는 생각이 들었습니다.

마침 너무 좋은 문서를 찾아서 중요한 부분 세가지만 발췌, 의역해보려 합니다.

기존 SSR 방식에는 다음과 같은 4가지 문제가 존재합니다.

컴포넌트를 표시하기 위해 전체 페이지에 대한 데이터를 서버에서 가져와야 합니다. 그 이후에, useEffect() 훅을 사용하여 client-side 데이터를 가져옵니다. 이는 server-side로 데이터를 가져오는 것보다 더 오랜 시간이 걸리고, 컴포넌트가 렌더링되고 hydration된 이후에만 발생합니다.
앱의 복잡성이 증가하면 javascript 번들의 크기가 증가합니다. 따라서, 사용자가 다운로드하는 코드의 양도 증가합니다.
hydration 최적화에도 불구하고 사용자는 자바스크립트 번들을 다운로드하여 해당 컴포넌트에 대해 구현할 때까지 컴포넌트와 상호 작용할 수 없습니다.
자바스크립트 연산의 대부분은 여전히 클라이언트에서 발생합니다.

RSC를 도입하면 위의 4가지 문제를 해결할 수 있습니다.

RSC는 개별적으로 데이터를 가져와 서버에서 렌더링합니다. 이 프로세스는 클라이언트 측에서 다시 렌더링할 필요가 없으므로 성능이 향상됩니다.

다시 말해, 훨씬 더 강력하고 DB에 물리적으로 더 가까운 서버가 컴퓨팅 집약적인 렌더링을 처리하고 인터랙티브한 코드만 클라이언트로 전송합니다.

상태 변경으로 인해 RSC를 다시 렌더링해야 하는 경우 서버에서 새로 고침하고 하드 새로 고침 없이 기존 DOM에 원활하게 병합합니다. 따라서 서버에서 뷰의 일부가 업데이트되더라도 클라이언트 상태는 유지됩니다.

Javascript 번들의 크기를 줄이고 로딩 성능을 개선하는 데 도움이 됩니다.
- 서버 컴포넌트를 사용하면 초기 페이지 로딩이 더 빠르고 간결해집니다. 기본 클라이언트 측 런타임은 캐싱이 가능하고 크기가 예측 가능하며 애플리케이션이 커져도 증가하지 않습니다.
data fetching시에 워터폴을 방지하여 server side의 데이터 종속성을 빠르게 해결합니다.
- 기존 클라이언트 측 렌더링에서 컴포넌트는 비동기 작업이 완료되기를 기다리는 동안 React Suspense를 사용해 렌더링 프로세스를 "일시 중지"하고 폴백 상태를 표시합니다. RSC를 사용하면 데이터 불러오기와 렌더링이 모두 서버에서 이루어지므로 Suspense는 서버 측에서도 대기 기간을 관리하여 총 왕복 시간을 단축하여 폴백 및 완료된 페이지의 렌더링 속도를 높입니다.

Server와 Client Components의 균형을 맞춰야 합니다.
- 개발자는 server-side rendering 및 data fetching에는 RSC를 활용하고, 지역적으로 사용되는 상호작용 기능 및 사용자 경험에는 클라이언트 컴포넌트를 사용하는 것을 고려하세요. 적절한 균형을 유지하면 고성능의 효율적이고 매력적인 애플리케이션을 만들 수 있습니다.
Next.js와 함께 data fetching을 향상시키는데 사용합니다.
- RSC는 서버에서 데이터를 가져오기 때문에 백엔드 데이터에 안전하게 액세스할 수 있을 뿐만 아니라 서버와 클라이언트 간의 상호 작용을 줄여 성능을 향상시킵니다.