Loading
App Router
Dynamic
Suspense
Loading
By adding a loading.tsx file to this route, you'll notice the navigation becomes as fast as the Pages Router. However, you'll see that the static content isn't displayed instantly. Instead, there are two loading phases: one for navigation and another for data fetching.
A workaround would be to make the loading component match the static part of the page, but then you would need to build one loading for each page layout you have.
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}
Loading
There is a loading.tsx file in this route segment. Loading files are cached and are displayed immediately when navigating to dynamic routes.