HomeSlow loading, no SuspenseSlow loading, page-level SuspenseSlow, component-level SuspenseFast loading, page-level SuspenseFast loading, no Suspense

React Server Components and Suspense

This demo app contains 5 simple pages that show how React and NextJS work with React Server Components and Suspense.

The slow-loading pages have a simulated 3 second database call. Try the different versions to see how the UI feels when we implement page-level Suspense (via a loading.tsx file),component-level Suspense (via an explicit Suspense boundary) or no Suspense at all.

And here are a couple of fast-loading pages for good measure. When we know our RSC pages are very fast to render, we can get away with not thinking about async RSC behaviors or Suspense.