Suspense in Next.js

Suspense allows parts of a page to load independently while showing a fallback UI during data fetching.

What is Suspense?

Suspense is a React feature used by Next.js to pause rendering of a component until data is ready, while displaying a loading indicator.

How does it work?

<Suspense fallback={<p>Loading posts...</p>}>
  <Posts />
</Suspense>

While Posts fetches data, the fallback UI appears. Once ready, the real content replaces it.

Why use Suspense?

• Smoother loading experience
• Partial page rendering
• Better perceived performance
• Cleaner async UI handling

Real-World Example

A dashboard loads charts and user data separately. Each section shows its own loading state instead of blocking the whole page.

Interview Tip

Suspense allows components to wait for async data while showing a fallback UI, enabling progressive rendering.