Streaming SSR과 Suspense를 활용하여 점진적으로 UI를 렌더링합니다. 페이지를 새로고침하여 로딩 과정을 확인하세요.
← App Router 예제로 돌아가기모든 데이터가 준비될 때까지 기다리지 않고, 준비된 부분부터 순차적으로 전송합니다.
각 컴포넌트는 서로 다른 속도로 로드됩니다. Suspense를 사용하여 독립적으로 스트리밍됩니다.
이 데이터는 500ms 후에 로드되었습니다.
이 데이터는 1500ms 후에 로드되었습니다.
이 데이터는 3000ms 후에 로드되었습니다.
<Suspense fallback={<Loading />}>
<AsyncComponent />
</Suspense>
// 중첩된 Suspense
<Suspense fallback={<PageLoading />}>
<Header />
<Suspense fallback={<ContentLoading />}>
<MainContent />
</Suspense>
<Footer />
</Suspense>| 특성 | 전통적 SSR | Streaming SSR |
|---|---|---|
| 데이터 로딩 | 모든 데이터를 기다림 | 준비된 것부터 전송 |
| TTFB | 느림 (모든 데이터 대기) | 빠름 (즉시 전송 시작) |
| 사용자 경험 | 긴 백화면 | 점진적 표시 |
| 느린 API 영향 | 전체 페이지 지연 | 해당 부분만 지연 |
| SEO | 완전한 HTML | 점진적이지만 완전함 |