RSC Examples Gallery

Using an Error Boundary to catch server component errors

Using the error.tsx convention to catch errors

When happens out of the box when you have an RSC error and don't handle it

Logic to retry rendering a page after an error

Logic to retry rendering a component after an error

If your data sources are always fast, this approach is simple and fast enough

Renders parts of your UI instantly, and streams in the rest as it becomes available

No suspense and slow data loading means this page loads very slowly

Uses a loading.tsx file to automatically wrap the page in a Suspense boundary

Using an Error Boundary to catch server component errors

Using the error.tsx convention to catch errors

When happens out of the box when you have an RSC error and don't handle it

Logic to retry rendering a page after an error

Logic to retry rendering a component after an error

What happens when a Promise sent from server to client is rejected

How to handle a rejected Promise sent from server to client

Using an Error Boundary to catch server component errors

Using the error.tsx convention to catch errors

If your data sources are always fast, this approach is simple and fast enough

No suspense and slow data loading means this page loads very slowly

Renders parts of your UI instantly, and streams in the rest as it becomes available

Uses a loading.tsx file to automatically wrap the page in a Suspense boundary

Renders parts of your UI instantly, and streams in the rest as it becomes available

No suspense and slow data loading means this page loads very slowly

Uses a loading.tsx file to automatically wrap the page in a Suspense boundary

Uses a loading.tsx file to automatically wrap the page in a Suspense boundary

What happens when a Promise sent from server to client is rejected

How to handle a rejected Promise sent from server to client

As well as data, fully-rendered React components can be streamed as promises

Remarkably, in-progress Promises can be sent from the server to the client

If your data sources are always fast, this approach is simple and fast enough

What happens when a Promise sent from server to client is rejected

How to handle a rejected Promise sent from server to client

As well as data, fully-rendered React components can be streamed as promises

Remarkably, in-progress Promises can be sent from the server to the client

If your data sources are always fast, this approach is simple and fast enough

How to show a spinner or other status while a form is submitting

How to handle form validation with Zod and Server Actions

Forms can be submitted directly to Server Actions

How to show a spinner or other status while a form is submitting

How to handle form validation with Zod and Server Actions

Forms can be submitted directly to Server Actions

Any time you need a component to be running in the browser, mark it use client

If you don't need interactivity in the things you render, you can do the whole thing on the server

Any time you need a component to be running in the browser, mark it use client

If you don't need interactivity in the things you render, you can do the whole thing on the server