React Suspense Advanced

Advanced Suspense patterns for better UX.

Multiple Suspense Boundaries

function Page() {
  return (
    <div>
      <Suspense fallback={<HeaderSkeleton />}>
        <Header />
      </Suspense>

      <Suspense fallback={<ContentSkeleton />}>
        <Content />
      </Suspense>

      <Suspense fallback={<SidebarSkeleton />}>
        <Sidebar />
      </Suspense>
    </div>
  );
}

Streaming SSR

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <h1>Page Title</h1>
      <Suspense fallback={<Spinner />}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

Error Boundaries with Suspense

<ErrorBoundary fallback={<Error />}>
  <Suspense fallback={<Loading />}>
    <DataComponent />
  </Suspense>
</ErrorBoundary>

Remember

• Multiple boundaries for granular loading
• Stream content to client
• Combine with Error Boundaries
• Better perceived performance

Next: Learn concurrent features!