Server Cache
App Router
Dynamic
Server Cache
This demo is also based on the Dynamic example, but it is caching the dynamic content on the server-side. You'll see faster navigation even on your first click because the cache may already be populated by other users.
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.
Server Cache
The dynamic content is being cached on the server-side. The cache is shared between all users. Cache revalidation can be scheduled or triggered on demand. This demo is using
unstable_cache to cache the dynamic content, but you might want to use the new experimental use cache feature.1const getCachedDynamicData = unstable_cache(getDynamicData);