Almighty 🚀
App Router
Dynamic
Server Cache
Prefetch
Image Prefetch
On Mouse Down
This demo takes inspiration from the NextFaster project. Here, navigation feels instantaneous—there's no visible loading, not even for images on the first click. The demo combines prefetch={true} with server-side caching and includes a custom link implementation that prefetches images on link hover and triggers navigation on mouse down (as soon as you click instead of waiting for release).
The mock data was generated with a custom script using gpt-4o-mini and dall-e-3. Images are stored and served from Edge Store.
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);
Prefetch
The Link component is configured with prefetch={true}, which tells Next.js to prefetch the entire page, including the dynamic content.
Image Prefetch
There is a custom login on this demo that prefetches the images of the next page on link hover. It was originally implemented in the NextFaster project. The main code you will want to check is the prefetch-images api route and the custom link.tsx component.
On Mouse Down
The links on this demo trigger navigation on mouse down (as soon as you click instead of waiting for release). This makes navigation feel a little faster.