스트리밍으로 더 빠른 웹 애플리케이션 구축하기

Next.js App Router에서 스트리밍은 서버에서 클라이언트로 UI를 점진적으로 전송해, 모든 데이터 로딩이 끝날 때까지 기다리지 않고 사용자가 즉시 콘텐츠를 볼 수 있게 한다. 느린 데이터 소스가 초기 렌더링을 막는 문제를 해결하며, Amazon·Google 같은 주요 플랫폼이 이미 활용하는 방식이다.

핵심 포인트

서버에서 클라이언트로 UI를 조각 단위로 전송해 전체 로딩 대기 없이 중요 콘텐츠를 먼저 표시한다.
느린 데이터 소스가 있어도 CTA 버튼 같은 핵심 요소를 즉시 보여주고 나머지는 비동기로 로딩한다.
React Suspense boundaries를 활용한 out-of-order streaming(기본값)과 in-order streaming을 지원한다.
Partial Prerendering으로 정적 라우트 셸을 미리 생성해 TTFB를 최소화하고 CDN 엣지에 배포한다.
LLM 응답처럼 5~40초 걸리는 AI 출력도 스트리밍으로 사용자 체감 대기 시간을 크게 줄인다.

상세 정리

핵심 개념: 스트리밍은 완성된 페이지를 한 번에 보내는 대신 준비된 UI 조각을 즉시 클라이언트로 전송한다. 사용자는 빈 화면 대신 로딩 중인 인터페이스를 본다.
병목 문제: 기존 SSR은 가장 느린 데이터 소스가 응답할 때까지 모든 렌더링을 블록한다. 데이터베이스 쿼리 하나가 늦으면 전체 페이지가 지연된다.
성능 이점: JavaScript·스타일시트·폰트 로딩을 병렬화하고, Core Web Vitals 지표와 전환율 개선에 직결된다.
React Suspense 활용: Suspense 경계 안의 컴포넌트는 독립적으로 스트리밍되며, 레이아웃 컴포넌트를 먼저 보내 하이드레이션을 일찍 시작할 수 있다.
out-of-order streaming: 기본값. 데이터가 준비된 순서대로 컴포넌트를 전송해 체감 로딩 시간을 줄인다. 리뷰 섹션 같은 낮은 우선순위 컴포넌트는 상품 정보 이후에 스트림된다.
Partial Prerendering: 정적 라우트 셸을 빌드 시 미리 생성해 엣지 전역에 배포하고, 동적 부분만 스트리밍으로 채운다. TTFB를 크게 줄이는 하이브리드 접근이다.
데이터 최소화: 컴퓨트를 데이터 원본 근처에 배치해 네트워크 왕복 횟수를 줄이는 아키텍처가 권장된다.
AI/LLM 적용: LLM 응답은 5~40초 소요될 수 있어 전통적 SSR로는 사용자 경험이 나쁘다. 스트리밍으로 토큰이 생성될 때마다 즉시 화면에 표시한다.

왜 읽나Next.js App Router에서 서버 스트리밍을 처음 적용하거나 React Suspense와 Partial Prerendering을 실무에 연결하고 싶은 프론트엔드·풀스택 개발자에게 유용하다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

스트리밍으로 더 빠른 웹 애플리케이션 구축하기

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기