RSC Demos

React has a feature called Suspense that allows deferred rendering of child components. When used with Server Components, a loading state can be shown while data is being fetched on the server.

Moreover, when used with Server Components, Suspense allows the data to be streamed without blocking the initial page load. Unlike with a client component, no additional network requests are needed. Watch with a throttled network to see the power of streaming in action, especially on first load.

server

node.js

Kelley Hoppe

Global Solutions Engineer

Ms. Mattie Doyle

Chief Research Liaison

Lucia Boyer

Dynamic Program Assistant

client

node.js

When used with a Server Component, Suspense allows the data to be streamed without blocking the initial page load. It does not require another round trip as it's streamed during the initial page request.

The "old school" client useEffect data fetching pattern also doesn't block, but it requires another round trip that can only begin after the initial page load is complete.

Server Component with Suspense

import { Suspense } from "react";
// ...

export async function UserList() {
  const users = await getSampleData(3);
  return <Users users={users} />;
}

export default async function SuspenseDemo() {
  return (
    <Suspense fallback={<Spinner />}>
      <UserList />
    </Suspense>
  );
}