Streaming UI with React Suspense

Snippet

Streaming UI with React Suspense

Streaming allows you to break down the page's HTML into smaller chunks and progressively send those chunks from the server to the client. This prevents slow data fetches from blocking the entire page render.

snippet.js
javascript
import { Suspense } from 'react';
import { Skeleton } from './ui/skeleton';
import SlowComponent from './components/SlowComponent';
 
export default function Page() {
  return (
    <section>
      <h1>Dashboard</h1>
      <Suspense fallback={<Skeleton />}>
        <SlowComponent />
      </Suspense>
    </section>
  );
}

nextjs

Breakdown

import { Suspense } from 'react';

Imports the Suspense component to handle asynchronous component loading boundaries.

Defines a loading state (the Skeleton) that displays while the child component is resolving.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Streaming UI with React Suspense

Related