Suspense
App Router
Dynamic
Suspense
You might expect that wrapping the dynamic content with Suspense would make navigation as fast as the Pages Router, but that's not what happens. While navigation does become faster than in the previous demo, there's still a slight delay between clicking the link and seeing the rendered page.
App Router
This demo uses the App Router. Which is a newer way of developing apps with Next.js. It supports nested layouts, provides built-in solutions for loading states, error handling and data fetching. It defaults to server components and makes it easy to stream additional data from the initial page request.
Dynamic
The page includes dynamic content fetched through an API, which takes about one second to load. With the Pages Router, data fetching logic needs to be handled client-side. For the App Router, data can be fetched directly within the server component, simplifying the code a bit.
Suspense
The dynamic content is wrapped in a Suspense component, which shows a loading spinner while data is fetched. The page doesn't make an extra request to get the dynamic content—the content is streamed from the initial page request itself.
1export default function Page(props: { params: Promise<{ id: string }> }) {
2  return (
3    <div>
4      Static Title
5      <Suspense fallback={<Spinner />}>
6        <DynamicComponent {...props} />
7      </Suspense>
8    </div>
9  );
10}