What is Suspense in React 18?

Example:

<Suspense fallback={<LoadingSpinner />}>
  <Profile />
</Suspense>

In this code:

What is Streaming in React 18?

Here’s how it works:

The result?

How to Use Suspense for Data Fetching

Example 1: Using React.lazy() to load components

const UserProfile = React.lazy(() => import('./UserProfile'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserProfile />
    </Suspense>
  );
}

This way, the component is loaded only when needed, and you can show a placeholder while waiting.

Example 2: Using Suspense in Next.js (with the new App Router)

// app/page.tsx

export default function Page() {
  return (
    <>
      <Header />
      <Suspense fallback={<PostsLoading />}>
        <Posts />
      </Suspense>
    </>
  );
}

Here, the Posts component will load later — and while it loads, users will see the <PostsLoading /> component instead.

Server Components + Streaming = Faster Pages

What are Server Components?

Why it’s great:

Why It Matters: Benefits of Suspense and Streaming

Faster Load Times

Cleaner Loading States

Better SEO

Less JavaScript = Better Performance

Smooth Transitions

Best Practices and Tips

Real Example: Suspense + Streaming

Here’s how you can use multiple Suspense boundaries to load parts of the page separately:

export default function ProductPage() {
  return (
    <>
      <Suspense fallback={<ProductLoading />}>
        <ProductDetails />
      </Suspense>

      <Suspense fallback={<ReviewsLoading />}>
        <ProductReviews />
      </Suspense>
    </>
  );
}

This means:

Helpful Tools & Libraries

Why This Matters for Performance and SEO

By using Suspense and Streaming, you can:

Let’s work together to build smart, scalable, and user-friendly software.