React Server Component와 Streaming을 활용한 웹 성능 최적화

이 게시물은 Next.js App Router를 사용하여 React Server Components와 Streaming 기술로 웹 성능을 극대화하는 방법을 설명합니다.

주요 Data Fetch 패턴 비교

• Client Data Fetch: 빠른 인터랙션 반응, 그러나 실제 데이터 로딩까지 시간이 길다
• Server Data Fetch without Streaming: 데이터 로딩 시간은 짧으나 페이지 응답이 느리고 사용자 체감이 떨어진다
• Server Data Fetch with Streaming: 두 패턴의 장점을 결합하여 빠른 반응과 짧은 로딩 시간, Skeleton UI를 통한 체감 속도 향상을 제공

실용적인 Data Fetch 패턴과 React Suspense 활용

• Server Component에서 Promise를 생성하고 Client Component에서 React use 훅으로 데이터를 받아오는 방식
• Suspense Boundary로 데이터 로딩 범위를 좁혀 사용자 경험 개선
• React Server Components의 Payload를 활용해 Promise 상태와 데이터를 스트리밍으로 관리하는 내부 동작 설명

결론

Next.js App Router에서 loading.tsx를 반드시 추가하고, Streaming과 React Server Components를 적극 활용해 사용자 체감 성능을 높일 것을 권장합니다.