Next.js Course
Next.js
/
Intermediate

Suspense in Next.js

Definition

A React feature deeply integrated into Next.js that orchestrates the declarative loading states of asynchronous components and data fetching.

Explain Like I'm New

Suspense is a boundary you draw around a piece of your UI. You tell React: 'If anything inside this box is not ready yet (like it is waiting for a database), pause, and show this Loading Spinner instead.'

Real World Example

Drawing a Suspense boundary around a 'Recommended Videos' sidebar. While the complex algorithm figures out what videos to recommend, the user sees a pulsing skeleton loader.

Common Use Cases

  • •Streaming UI
  • •Graceful loading states
  • •Component decoupling

Interactive Example

import { Suspense } from 'react';
import { SkeletonCard } from '@/components/ui/Skeleton';

export default function Dashboard() {
  return (
    <div className="grid grid-cols-2">
      {/* Strategy 1: Independent Suspense (Pop in whenever they finish) */}
      <Suspense fallback={<SkeletonCard />}>
        <WeatherWidget />
      </Suspense>
      
      <Suspense fallback={<SkeletonCard />}>
        <StockTickerWidget />
      </Suspense>

      {/* Strategy 2: Grouped Suspense (Wait for both to finish, show together) */}
      <Suspense fallback={<p>Loading financial data...</p>}>
        <BankBalance />
        <RecentTransactions />
      </Suspense>
    </div>
  );
}

Interview Questions

basic

  • What prop on the `<Suspense>` component dictates what UI is shown while the data is loading?

intermediate

  • If you have three different Server Components wrapped in the SAME `<Suspense>` boundary, do they show up one-by-one or all at once?

Flash Cards

Question

Which prop?

Click to reveal answer
Answer

The `fallback` prop (e.g., `fallback={<Spinner />}`).

Question

One by one or all at once?

Click to reveal answer
Answer

All at once! A single Suspense boundary waits for EVERYTHING inside of it to finish before it swaps the fallback out. If you want them to pop in individually, you must wrap each component in its own separate `<Suspense>` boundary.