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

David Bruen

Corporate Accountability Officer

Devin Swaniawski DVM

Product Security Planner

Ken Vandervort

Dynamic Communications Architect

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>
  );
}