App Router (9) - 스트리밍

2026.09.28 · 3분 읽기 · 조회 0

스트리밍 (Streaming)

스트리밍이란 서버 -> 클라이언트로 데이터를 보내줘야 할 때, 데이터의 크기가 너무 크거나, 서버 측에서 데이터를 준비하는데 걸리는 시간이 오래 걸려, 데이터를 빠르게 보내주는 것이 어려울 때

데이터를 잘게잘게 쪼개어 여러개의 조각으로 하나 씩 보내주는 것을 말한다.

클라이언트는 당장 모든 데이터가 없어도, 일단 가지고 있는 것부터 보여줄 수 있어 웹성능이 좋게 느껴진다.

이는 주로 OTT서비스에서 많이 사용하는 방법인데 Next.js는 이것을 HTML에도 적용할 수 있게 자체적으로 스트리밍 기능을 제공한다.

일단 바로 보여줄 수 있는 레이아웃부터 보여주고, 데이터페칭 같이이 오래걸리는 부분은 로딩 상태를 띄우고 렌더링 완료 시 이 부분만 따로 완성시킨다.

스트리밍은 next의 Dynamic Page에서 자주 사용된다. 풀라우트 캐시에 저장되지 않기 때문에, 매 번 페이지 렌더링을 시켜주는데, 일부 데이터 요청이 오래 걸릴 경우 전체 페이지 로딩이 느려진다.

결국 페이지 스트리밍은 오래 걸리는 컴포넌트의 렌더링을 사용자가 좀 더 좋은 환경에서 기다릴 수 있도록 만들어준다.

페이지 스트리밍

특정 페이지 컴포넌트를 스트리밍하고 싶다면 같은 파일 계층에 loading.tsx 파일이 있어야 한다.

// loading.tsx
export default function Loading() {
  return <div>Loading...</div>;
}

다음과 같이 파일을 만들고 코드를 작성하면 바로 형제인 page.tsx 페이지에 스트리밍이 적용된다. 이 페이지에 스켈레톤 ui 같은 것을 넣어주면 좋을 것이다.

주의

1. loading.tsx 파일은 동일한 경로의 파일에만 적용되는 것이 아니라, layout.tsx 파일처럼 하위의 모든 페이지에도 적용이 된다.
2. loading.tsx 파일이 스트리밍하도록 되는 페이지는 async가 붙어서 비동기로 작동하는 페이지 뿐이다. 비동기가 아니면 그냥 바로 불러와지니 스트리밍할 필요도 없다.
3. loading.tsx는 무조건 페이지 컴포넌트에만 스트리밍을 적용할 수 있다. layout, 또는 일반 컴포넌트에는 스트리밍을 적용할 수 없다.
4. loading.tsx는 쿼리스트링만 바뀌는 것으로는 스트리밍이 적용되지 않는다. /search?q=검색1 에서 /search?q=검색2 처럼 쿼리스트링만 바뀌면 스트리밍이 적용되지 않는다. 무조건 url이 변경되어야 한다.

컴포넌트 스트리밍

페이지가 아닌 컴포넌트 단위로 스트리밍을 적용하는 방법이 있다.

import { Suspense } from "react";
 
<Suspense fallback={<div>Loading...</div>}>
  <AsyncComponent/>
</Suspense>

<Suspense>라는 컴포넌트로 비동기작업을 하는 컴포넌트를 감싸면 이때부터 해당 컴포넌트는 스트리밍 된다. fallback 이라는 프롭스를 이용해, 불러오는 동안 보여줄 ui를 설정할 수 있다.

Suspense를 이용할 때 또한, 쿼리스트링 값만 바뀌는 경우 (/search?q=1 -> /search?q=2) 스트리밍이 적용되지 않는다. 그러나 서스펜스는 이를 해결할 수 있다.

// key 값 이용
<Suspense fallback={<Loading/>} key={q || ""}>
  <AsyncComponent/>
</Suspense>

key 프롭스는 내부의 값이 변경될 때 마다 다시 로딩상태로 돌아가게 한다.
쿼리스트링의 값을 key 값으로 넘겨주면 쿼리스트링 값이 바뀔 때 마다 스트리밍이 적용된다.

<Suspense> 컴포넌트는 한 페이지에 여러개의 비동기 컴포넌트를 다룰 때 훨씬 유용하다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글