[Next] 17. 스트리밍

스트리밍(Streaming)은 말 그대로, 아주 큰 데이터를 조각내어 연속적으로 전송하는 기술입니다.

 

전체 동영상을 다 다운로드할 필요 없이, 앞부분부터 바로 재생할 수 있는 것처럼
데이터를 "순차적으로 받아서 바로 사용"하는 방식입니다.

 

🧠 스트리밍은 왜 필요한가요?

일반적인 방식이라면, 서버는 모든 데이터를 준비한 후에야 클라이언트로 응답을 보냅니다.
하지만 데이터가 크거나 준비 시간이 오래 걸리는 경우, 사용자는 하얀 화면만 보면서 기다려야 하죠.

🚫 전체 렌더링이 끝날 때까지 아무것도 못 보는 건 사용자 입장에서 큰 불편입니다.

 

그래서 등장한 게 스트리밍 렌더링입니다.

✅ 핵심 개념 요약

• 데이터를 한 번에 다 전송하지 않고, 조각 단위로 나눠서 연속적으로 보냄
• 클라이언트는 데이터 일부만 받아도, 그 부분부터 렌더링 시작 가능
• 사용자 입장에서는 전체 페이지가 늦게 뜨더라도, 먼저 준비된 콘텐츠부터 볼 수 있음
• 마치 영상 스트리밍처럼 "받으면서 보여준다"고 이해하면 됨

🎁 Next.js는 스트리밍을 자체 지원합니다

Next.js의 App Router에서는 React 18의 기능을 기반으로 스트리밍을 기본적으로 지원합니다.
즉, 별다른 설정 없이도 layout.js, page.js, loading.js 등을 통해 스트리밍 렌더링이 가능합니다.

 

이러면 됨... 이렇게 쉽다고?
Loading 컴포넌트 만드는게 다라고?

• page.tsx: 실제 콘텐츠가 렌더링됨 (데이터 준비 필요)
• loading.tsx: 그 사이에 보여줄 로딩 UI

주의점이 있음.

/app/dashboard/loading.tsx가 존재하면,
/dashboard 아래 모든 하위 경로(/dashboard/settings, /dashboard/stats 등)도 같은 스트리밍 로딩 UI를 공유합니다.

단일 경로에 loading.tsx를 만들면, 해당 경로와 그 하위 경로까지 스트리밍 적용 대상이 됩니다.

2. 비동기 컴포넌트만 스트리밍됩니다

Next.js에서 스트리밍 렌더링이 적용되는 조건은 해당 컴포넌트가 비동기(async)일 것입니다.

tsx

복사편집

3. loading.tsx는 Suspense와 다릅니다

혼동하기 쉬운데, React의 <Suspense fallback={...}>와는 다르게
Next.js의 loading.tsx는 파일 기반 라우팅에서만 작동합니다.
각 컴포넌트 내부에서 직접 Suspense를 쓸 수도 있지만, loading.tsx는 라우팅 단위 전체에 적용되는 전역 스트리밍 UI입니다.

 

 

---

그럼 Suspense가 뭐냐?

🧩 Suspense란?

Suspense는 React에서 "비동기 컴포넌트를 기다리는 동안 보여줄 UI"를 지정하는 기능이야.

❗ "이거 아직 로딩 중인데, 그동안 이거 보여줄게!" 라고 React에게 알려주는 장치.

 

그럼 loading이랑 뭐가 다름?

loading.tsx 파일을 사용하면, 무조건 페이지 컴포넌트 단위로만 적용됩니다.
즉, /app/products/page.tsx가 비동기 컴포넌트일 때만 그 경로 아래 있는 loading.tsx가 작동하죠.

근데...

❓ "그냥 일반 컴포넌트 하나만 로딩 걸고 싶은데?"
❓ "페이지 전체가 아니라, 특정 영역만 따로 fallback 보여주고 싶은데?"

 

이럴 땐 Suspense를 직접 써야 합니다.

✅ Suspense는 어디에 쓰는가?

Suspense는 컴포넌트 단위로 자유롭게 쓸 수 있는 로딩 처리 장치입니다.

import { Suspense } from "react";
import UserInfo from "./UserInfo";

function Page() {
  return (
    <div>
      <h1>내 프로필</h1>

      <Suspense fallback={<p>유저 정보 불러오는 중...</p>}>
        <UserInfo />
      </Suspense>
    </div>
  );
}

위 구조처럼, UserInfo가 비동기 컴포넌트라면 준비되기 전까진 fallback으로 지정한 텍스트가 보여지고,
준비가 끝나면 자동으로 실제 콘텐츠가 렌더링됩니다.

즉, 컴포넌트 단위로 부분 로딩 처리를 하고 싶을 때는 Suspense를 직접 쓰는 게 정답이에요.

 

 

항목 | loading.tsx | Suspense

적용 범위	라우팅 단위 (page.tsx 기준)	컴포넌트 단위
작동 조건	해당 디렉토리 내 page.tsx가 async일 때	감싼 컴포넌트가 async일 때
코드 위치	파일로 정해져 있음 (app/**/loading.tsx)	JSX 내에서 자유롭게
유스케이스	전체 페이지 로딩 시 사용	특정 UI 영역만 부분 로딩 시 사용
Next.js 전용?	✅ Next.js App Router에서만 사용 가능	❌ React 표준 기능 (Next.js 외에서도 가능)

 

상황 사용 추천

페이지 전체가 느리게 뜨는 경우	loading.tsx
리스트, 사이드바, 카드 하나 등 일부만 느릴 때	Suspense
병렬로 여러 개 로딩 상태 관리하고 싶을 때	여러 개의 Suspense 또는 SuspenseList

✨ 마무리 요약

• 스트리밍 = 데이터를 쪼개서 순차적으로 보여주는 기술
• loading.tsx = 페이지 단위 스트리밍 로딩 UI
• Suspense = 컴포넌트 단위 로딩 제어 도구
• 두 개는 역할과 위치가 다름, 용도에 따라 잘 골라 써야 함