Prefetch
App Router
Dynamic
Prefetch
This one is the same as the Dynamic demo, but with
prefetch={true} in the Link component. This tells Next.js to prefetch the entire page, including dynamic content. If you wait at least one second before clicking the link, navigation should be instant without any loading visible. If you combine this with caching to minimize API calls, navigation becomes super smooth.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.
Prefetch
The
Link component is configured with prefetch={true}, which tells Next.js to prefetch the entire page, including the dynamic content.