株式会社オブライト
Web Frontend2026-05-17

Suspense

Also known as: React Suspense / サスペンス

React's async rendering feature. It shows a fallback UI (e.g., a loading spinner) while waiting for data fetching or lazy-loaded code, automatically switching to the real content when it is ready.


Overview

Suspense wraps async components with 'Suspense fallback={Spinner}'. Since React 18, integration with data-fetching libraries (Relay, SWR, TanStack Query) is stable, and Suspense is central to server-side Streaming SSR.

Integration with Streaming

In the Next.js App Router, each Suspense boundary streams its HTML chunk progressively. The page skeleton appears immediately, and slower data-dependent sections are inserted later, dramatically improving perceived performance.

Related Columns

Related Terms

Feel free to contact us

Contact Us