Client Cache
App Router
Dynamic
Client Cache
This demo is the same as the Dynamic demo, but with the Client Cache enabled. You will see that the navigation is slow on the first time you click the link, but it becomes instant on the second time. The cache is configured to expire after 30 seconds for dynamic pages. It will also become slow again if you refresh the 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.
Client Cache
The client cache is enabled. You might have noticed that the domain in this demo is different. This is because the client cache is a global configuration for the app. You can configure how long the cache should last for static and dynamic pages in the
next.config.ts file. This demo is configured to cache dynamic pages for 30 seconds and static pages for 180 seconds, which was the default in Next.js 14. (Since Next.js 15, the default is to not cache).1const nextConfig: NextConfig = {
2 experimental: {
3 staleTimes: {
4 dynamic: 30,
5 static: 180,
6 },
7 },
8};