[Next.js 15] - Part 6. Understand Prefetching and Caching

When using the <Link> component for navigation in Next.js, it’s essential to understand how Next.js internally optimizes your app. These optimizations ensure your website feels fast and responsive to users. Let's break it down:

Code-Splitting by Route Segments

What It Means:

Next.js automatically code-splits your application by route.

• Each page gets its own JavaScript bundle containing only the code and assets required for that page.

• This ensures that users only download what they need, improving performance.

Impact:

• Faster initial load times for individual pages.

• No extra work is needed from developers—this is handled out of the box.

Prefetching in Next.js

What is Prefetching?

Prefetching is a technique where Next.js preloads the content of a route before a user clicks a link. This results in nearly instant navigation when a user decides to visit that route.

How Prefetching Works:

1. When a page loads, Next.js prefetches the content of routes linked from the current page (those visible in the user's viewport).

2. This prefetching is enabled by default for static routes (routes without dynamic parameters).

Important Notes:

1. Prefetching only works in production mode.

2. During development (npm run dev), prefetching is disabled to ensure live updates are always visible.

To disable prefetching for a specific link, set the prefetch property to false:

Caching in Next.js

What is Caching?

Next.js uses a client-side in-memory cache called the Router Cache. When a page is prefetched, it’s stored in this cache.

How It Works:

1. When navigating between prefetched pages, Next.js serves the page from the cache instead of fetching it from the server.

2. This ensures navigation is instantaneous.

Benefits:

• Eliminates network latency for prefetched pages.

• Pages feel "instant" when users click links.

Demonstrating Prefetching and Caching

Step-by-Step Example:

1. Run the Production Build:

• Build the application:

• Start the production server:

2. Initial Load and Prefetching:

• Open the home page.

• Check the links to other pages (e.g., /about and /projects). These routes are prefetched automatically.

3. Modify a Page:

• Edit the content of the projects page (e.g., add a new line of text).

• Stop the server, rebuild (npm run build), and restart the server.

4. Observe Cached Content:

• Without refreshing the browser, navigate to the projects page via the link.

• The page displays old content because it’s being served from the client cache.

5. Force a Refresh:

• Reload the page in the browser.

• The updated content is now visible because the browser fetches the latest version from the server.

Benefits and Tradeoffs

Pros:

1. Improved User Experience:

• Faster navigation between pages.

• Seamless transitions for users.

2. Reduced Server Load:

• Cached pages reduce the need for repeated server requests.

Cons:

1. Outdated Content:

• Users may see stale content if the cache hasn’t been invalidated.

2. Increased Resource Usage:

• Prefetching uses additional bandwidth to preload pages.

Conclusion

Next.js’s prefetching and caching mechanisms are designed to enhance performance and user experience. While these features are highly beneficial for most scenarios, it’s important to understand how they work and when to disable them (e.g., for frequently updated dynamic routes).

For most static and semi-static applications, these optimizations provide a smooth and snappy user experience, which is a cornerstone of modern web development.