Suspense handles async operations with declarative loading states. Here's how to use it effectively.
Basic Suspense#
Loading code block...
Nested Suspense Boundaries#
Loading code block...
Suspense with Data Fetching#
Loading code block...
Error Boundaries with Suspense#
Loading code block...
Streaming SSR with Suspense#
Loading code block...
SuspenseList (Experimental)#
Loading code block...
Transitions with Suspense#
Loading code block...
Deferred Values#
Loading code block...
Custom Suspense Hook#
Loading code block...
Loading UI Patterns#
Loading code block...
Testing Suspense#
Loading code block...
Best Practices#
Boundaries:
✓ Place boundaries around independent sections
✓ Use nested boundaries for granular loading
✓ Combine with error boundaries
✓ Keep fallbacks visually similar
Performance:
✓ Start fetching before render when possible
✓ Use transitions for navigation
✓ Defer non-critical updates
✓ Stream SSR content
UX:
✓ Use skeleton screens over spinners
✓ Show partial content early
✓ Maintain layout stability
✓ Provide retry mechanisms
Conclusion#
Suspense boundaries declaratively handle async loading states. Place them strategically for granular loading, combine with error boundaries for resilience, and use transitions for smooth navigation. In Next.js, leverage streaming SSR for optimal performance.