Suspense, plainly explained

Suspense is a React component that says: while the stuff inside me is loading, show this fallback. You wrap an async Server Component in Suspense, pass a fallback prop, and React streams the fallback first and swaps it for the real content when it is ready.

app/books/page.tsx

tsx

import { Suspense } from 'react';
import { BookList } from './BookList';
import { BookListSkeleton } from './BookListSkeleton';

export default function BooksPage() {
  return (
    <main>
      <h1>Our Catalog</h1>
      <p>Fresh picks, updated daily.</p>
      <Suspense fallback={<BookListSkeleton />}>
        <BookList />
      </Suspense>
    </main>
  );
}

Suspense wraps the slow component so the rest of the page paints immediately.

Read the page carefully. The h1 and the paragraph render immediately because they have no data dependencies. The BookList is async and slow, so it waits. Suspense streams the skeleton first and swaps it for the real list when the fetch finishes. The user sees the page frame in under a second and the data fills in after.

Quiz: Quiz

Loading practice…