Streaming & Suspense

~22 min · streaming, Suspense, loading

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Streaming 이 존재하는 이유

Streaming 없이는 server 가 모든 data 기다린 후 첫 byte HTML 보내야 함. Streaming 으로 framework 가 shell + 싼 부분 즉시 보내고, 느린 부분 data resolve 시 stream.

Stream 두 방법

접근	Granularity
`loading.tsx`	Route segment 통째 — framework 가 Suspense wrap 해줌
	Component 별 — 본인이 뭐 독립 stream 할지 선택

사용자 체감

Page header 와 navigation 즉시 보임; 느린 chart 는 skeleton 보이고; chart data 도착 시 skeleton 이 진짜 content 로 swap — 위 page re-render 없이.

Code

Whole-segment streaming·tsx

// app/dashboard/loading.tsx — 즉시 보임
export default function Loading() {
  return <DashboardSkeleton />;
}

// app/dashboard/page.tsx — data 도착 시 stream
export default async function Dashboard() {
  const data = await fetchSlow();
  return <DashboardContent data={data} />;
}

Granular Suspense islands·tsx

import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <div className="space-y-6">
      <h1>Dashboard</h1>
      <Suspense fallback={<StatsSkeleton />}>
        <Stats />
      </Suspense>
      <Suspense fallback={<ChartSkeleton />}>
        <RevenueChart />
      </Suspense>
      <Suspense fallback={<TableSkeleton />}>
        <RecentOrders />
      </Suspense>
    </div>
  );
}

External links

Streaming with Suspense

Exercise

느린 data-heavy page 골라서 Suspense boundary 셋으로 분리. Before/after timing capture: 사용자가 첫 paint 얼마나 빨리 봄?

Progress

Progress is local-only — sign in to sync across devices.

← PreviousParallel & Sequential Fetching Next →generateStaticParams

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.