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

문제Next.js App Router 로 마이그레이션할 이유와 RSC 와 전통 SSR 의 차이를 헷갈리는 팀이 많고, 데이터 페칭 패턴별 UX·성능 트레이드오프가 정리돼 있지 않다.

접근useEffect / Tanstack Query 기반 클라이언트 페칭, 스트리밍 없는 서버 페칭, Suspense + loading.tsx 기반 스트리밍 세 가지를 비교한다. 권장 패턴은 서버 컴포넌트가 미해결 Promise 를 prop 으로 넘기고 클라이언트가 use 훅으로 받는 방식.

결과Suspense 단위를 데이터가 필요한 컴포넌트로 좁혀 체감 응답 속도와 실제 로딩 시간을 동시에 줄인다. 준비된 영역은 먼저 보여주고 필요한 부분만 블로킹.