Next 앱라우터는 Suspense를 통한 스트리밍을 지원한다.
streaming이란?
React와 Next.js에서 스트리밍이 작동하는 방식을 알아보려면 서버사이드렌더링(SSR)을 이해해야한다.
- 서버에서 모든 데이터를 fetch한다.
- 데이터를 바탕으로한 HTML을 렌더링한다.
- 클라이언트로 HTML, CSS, Javascript를 전송한다.
- HTML, CSS를 통해 인터페이스를 표현한다. (상호작용 안되는)
- React hydration을 통해 상호작용이 될 수 있도록 한다.
streaming을 사용하게 된 배경
서버에서 모든데이터를 가져오고 작업이 완료되므로 순차적이고 차단적이다.
컨텐츠를 다운받기 전 빈화면이 보일 수있다.
streaming을 사용하면
페이지의 HTML을 작은조각으로 나누고 점진적으로 서버에서 클라이언트에 전송할 수있다.
이를 통해 모든 데이터를 기다리지 않고 일부를 빨리 표시할 수있게 된다. 빠른 TTFB(Time To First Byte)와 점진적 콘텐츠 표시를 가능하게 합니다.
React.Suspense는 아직 준비되지 않은 컴포넌트의 fallback UI를 먼저 보여준다.
데이터가 준비되면 점직적으로 완성된 UI로 대체된다.
seo
generateMetaData Next.js 클라이언트에 UI를 스트리밍하기 전에 내부 데이터 가져오기가 완료될 때까지 기다립니다.
이를 통해 스트리밍된 응답의 첫 번째 부분에 <head>태그가 포함됩니다.
스트리밍은 서버에서 렌더링되므로 SEO에 영향을 미치지 않습니다.
streaming작동원리
- suspense는 React Server Components + 스트리밍 렌더링을 통해 서버와 계속 통신하며 데이터를 점진적으로 가져온다.
- 모든 데이터가 준비될때까지 기다리지 않고, 준비된 부분부터 클라이언트에 전달한다.
- 서버와의 통신은 HTTP스트리밍 방식으로 일어나며, Next.js가 내부적으로 처리한다.
- 클라이언트는 이걸 받아서 하이드레이션 없이 조립한다. (서버 컴포넌트는 상호작용이 없기 때문에 하이드레이션이 필요없다.)
// page.tsx (RSC)
import ProductInfo from './ProductInfo';
import Reviews from './Reviews';
export default function Page() {
return (
<>
<h1>상품 상세</h1>
<Suspense fallback={<div>상품 정보를 불러오는 중...</div>}>
<ProductInfo />
</Suspense>
<Suspense fallback={<div>리뷰를 불러오는 중...</div>}>
<Reviews />
</Suspense>
</>
);
}- ProductInfo, Reviews가 동시에 서버에서 렌더링되며, 준비된 컴포넌트부터 서버에서 HTML로 전달된다.
- 네트워크 탭에서 확인하면 HTML이 조각조각 오는것을 확인할 수 있다.
streaming 과정
1. 초기 HTML틀과 Suspense fallback을 먼저 클라이언트로 전송
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="__next">
<h1>상품 정보</h1>
<p>상품 로딩 중...</p>
<p>리뷰 로딩 중...</p>
</div>
2. flight payload
서버는 JSON payload를 스트리밍으로 이어서 보냅니다.
<script>
self.__next_f.push([
"rsc",
[
[null, "product-stream-id", {... 렌더링된 Product 컴포넌트 데이터 ...}],
[null, "review-stream-id", {... 렌더링된 Reviews 컴포넌트 데이터 ...}]
]
])
</script>- 이 데이터는 react runtime이 읽어 조립하는 RSC payload
- self.__next_f.push(...)는 Next.js 내부에서 사용하는 Flight 데이터 푸시 방식입니다.
- 각 컴포넌트는 React가 hydration없이 직접 브라우저에 DOM으로 삽입합니다.
크롬 개발자 도구 > Network > document 혹은 /_next/data/... 또는 /_next/flight 요청을 보면 확인할 수 있다.
스트리밍 확인방법
개발자 도구 > 네트워크 탭에서 http 요청이 이렇게 오는것을 확인할 수 있다.
Content-Type: text/x-component; charset=utf-8
Transfer-Encoding: chunkedstreaming효과
Suspense를 사용하면 점진적 로딩, 사용자 경험 향상, 성능 최적화등을 효과적으로 구현할 수 있습니다.
TTFB(브라우저가 서버로부터 첫 번째 바이트의 응답을 받기 걸린 시간), FCP(First Contentful Paint), TTI(Time to Interactive) 를 개선하는데 도움이 된다.
참고 url
https://nextjs.org/docs/14/app/building-your-application/routing/loading-ui-and-streaming
'Next.js' 카테고리의 다른 글
| Full Route Cache를 활용한 성능 최적화 (2) | 2025.08.06 |
|---|---|
| Server Component와 Client Component 차이 (3) | 2025.07.25 |
| persistQueryClient를 활용해 초기렌더링 개선하기 (3) | 2025.07.08 |
| Next.js with CSS-in-JS (0) | 2024.12.26 |
| Next 13 이후 변경 점 (0) | 2024.07.21 |