React Server Component와 Streaming으로 웹 성능 극대화하기: Next.js 실전 가이드

간단 소개

React Server Component와 Streaming을 활용한 Next.js 웹 성능 최적화 전략 및 Data Fetch 패턴 비교 분석.

AI Summary

React Server Components (RSC)와 Streaming의 중요성
- RSC는 BFF에서만 실행되어 클라이언트 번들 크기를 줄이지만, HTML 크기는 늘릴 수 있음.
- Next.js App Router에서 <script>self.__next_f.push(...)</script> 태그는 RSC의 Payload를 담고 있으며, 서버 컴포넌트 렌더링 결과, CSS, 폰트 정보, props 등을 포함함.
Data Fetch 패턴 비교 및 최적화
- Client Data Fetch는 빠른 인터랙션 응답 속도를 제공하지만, 유의미한 정보 확인까지 시간이 오래 걸림.
- Server Data Fetch without Streaming은 유의미한 정보를 빠르게 제공하지만, 인터랙션 응답 속도가 느림.
- Server Data Fetch with Streaming은 loading.tsx를 통해 Suspense로 감싸, 빠른 응답 속도와 짧은 로딩 시간, Skeleton UI를 모두 제공하여 사용자 경험을 극대화함.
Client Component 내 Server Data Fetch 활용 패턴
- Server Component에서 Data Fetch 후 Promise를 Client Component에 prop으로 전달하고, React.use 훅을 사용하여 데이터를 받아오는 패턴은 코드 중복을 줄이고 필요한 컴포넌트만 Suspend 시킬 수 있음.
- React는 JSON 직렬화 과정에서 Promise를 ID로 대체하고, 클라이언트에서 해당 ID를 통해 Promise 상태를 관리하며 스트리밍된 데이터를 활용해 렌더링함.