React 18 이후, 프론트엔드에서 UX 성능을 향상시키기 위해 주목받는 기술이 있다. 바로 Suspense + Streaming.
특히 Next.js 13/14의 app 디렉토리 구조와 함께 사용하면 초기 로딩 속도를 크게 개선할 수 있다.
🚀 Suspense란?
Suspense는 비동기 컴포넌트를 로딩 중일 때, fallback UI를 먼저 보여주고 나중에 진짜 컴포넌트를 렌더링하는 React의 내장 기능이다.
<Suspense fallback={<Loading />}>
<MyComponent />
</Suspense>
- 데이터가 아직 도착하지 않았더라고 전체 화면이 멈추지 않음
- UX 흐름이 끊기지 않고 매끄럽게 이어짐
🌊 Streaming이란?
Streaming은 서버가 HTML을 ‘조각 단위’로 클라이언트에 전송하는 기술이다.
즉, 전체 데이터가 준비되기 전이라도, 준비된 부분부터 사용자에게 점진적으로 보여줄 수 있다.Next.js 13 이후 app 디렉토리를 사용하면, 이 Streaming 기능이 기본적으로 적용된다.
💡 왜 중요한가?
| 문제 상황 | SUspense + Streaming 도입 시 |
|---|---|
| 느린 API 응답 | fallback UI 먼저 렌더 → 사용자는 기다리지 않음 |
| 초기 로딩 시간 길어짐 | 준비된 UI부터 스트리밍으로 표시 |
| 체감 UX 느림 | 화면이 순차적으로 채워져 체감 속도 향상 |
🛠️ 실전 예제 (Next.js 14 기준)
📁 /app/page.tsx
import { Suspense } from "react";
import PostList from "./PostList";
export default function Page() {
return (
<div>
<h1>블로그</h1>
<Suspense fallback={<p>로딩 중...</p>}>
<PostList />
</Suspense>
</div>
);
}📁 /app/PostList.tsx (Server Component)
export default async function PostList() {
const res = await fetch("https://api.example.com/posts");
const posts = await res.json();
return (
<ul>
{posts.map((p) => (
<li key={p.id}>{p.title}</li>
))}
</ul>
);
}✔️ PostList가 API 호출로 느리더라도,
h1 블로그와 fallback 메시지는 먼저 렌더링된다.
⚠️ 적용 시 주의사항
- ✅ React 18 이상 필수
- ✅ SSR 환경 (Next.js app directory 등) 필요
- ❌ CSR-only 프로젝트에서는 Streaming 불가
- ✅ fetch()는 Server Component 내에서 직접 호출 가능
혹시 내용에 오류가 있다면 피드백 부탁드립니다. 🙇🏻♀️
아삭💦