Edge Runtime
App Router
Dynamic
Suspense
Edge Runtime
This demo has the same implementation of the Suspense demo, but with Edge Runtime enabled. You should notice significantly faster navigation. The main drawback is that Edge Runtime doesn't support all Node.js features, which can cause compatibility issues with some libraries.
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}Edge Runtime
This demo uses the Edge Runtime, which is a faster runtime compared to the default Node.js runtime. It does not support all the node.js features and some libraries might not work as expected.