Next.js Partial Prefetching Tutorial: Faster Navigation in Next.js 16.4

A page can look fast when it first opens and still feel sluggish when someone moves between sections, revisits a settings page, or opens a product from a large grid. Next.js 16.4 gives developers more control over this problem through Partial Prefetching, which prepares reusable page content before a click without automatically fetching every part of every destination. This tutorial explains how to enable the feature, decide which links should fetch extra content, and test whether the change actually improves navigation rather than simply increasing network traffic.

Why ordinary prefetching can waste work

Prefetching means requesting resources before a visitor explicitly opens a page, so the browser has less work to do after the click. In Next.js, the Link component can prefetch route data automatically when links enter the viewport, subject to the route type and framework configuration. This often makes navigation feel immediate, but fetching a complete destination can be wasteful when a page contains expensive dynamic data or a long list of possible destinations. A visitor might scroll past twenty product cards and open only one, while the application has already requested more information than that visitor needed.

Disabling prefetching everywhere is not a complete solution either. It reduces speculative requests, but it can push more loading work onto the moment when a visitor clicks, which is exactly when a delay becomes noticeable. Partial Prefetching offers a middle ground: prepare reusable content in advance and leave other work until the destination is opened. The practical goal is not to eliminate every loading indicator; it is to make the useful parts of the next screen available quickly without spending resources on pages nobody visits.

What changed in Next.js 16.4

Next.js 16.4, released in October 2026, builds on Partial Prefetching introduced in Next.js 16.3 and adds more control over how cached content is fetched. The release also enables Cache Components and Partial Prefetching by default in newly generated applications, so developers starting a fresh project can work with this model without first assembling the configuration themselves. Existing applications should not assume that upgrading automatically produces the same result in every route; their configuration and route structure still matter. The important distinction is that Partial Prefetching changes which content is prepared ahead of navigation, not simply how much JavaScript is sent to the browser.

A route's reusable shell can contain shared layouts and content that does not depend on the particular URL, while other content may depend on route parameters, query parameters, or the full URL. The framework can prepare the reusable portion first and fetch additional destination-specific content when needed. For example, a product listing can prepare the common product-page structure without necessarily fetching every detail for every product card. A link that needs richer content before the click can opt into a fuller prefetch, provided that the required data is eligible for caching.

Check your project before changing its configuration

Start by checking the installed Next.js version and locating the configuration file in your project root. You can inspect the version with the following command in your terminal:

npm ls next

Confirm that the project uses Next.js 16.4 or a compatible version that supports the configuration described here. Next.js applications may use either a JavaScript or TypeScript configuration file, so edit the existing file rather than creating a second configuration that could conflict with it. Before enabling the feature in a mature application, run the current tests and keep a record of how its important routes behave; otherwise, it becomes difficult to distinguish an existing problem from a change introduced during the rollout.

Enable Partial Prefetching in Next.js 16.4

For a project whose configuration needs to enable the feature explicitly, add the relevant options to the existing Next.js configuration. The following example uses a TypeScript configuration file and shows the two settings together:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
 cacheComponents: true,
 partialPrefetching: true,
};

export default nextConfig;

Preserve any other settings already used by your application when making this change. Cache Components provides the caching model that supports this approach, while Partial Prefetching controls how route content is prepared before navigation. Some existing projects may need changes to their data-fetching or caching patterns before they can use the new model safely, so do not treat these two lines as a substitute for migration checks. After saving the configuration, restart the development server and resolve any configuration or build errors before proceeding.

Next, choose one route where faster navigation would make a noticeable difference. A product detail page, a frequently visited dashboard section, or a settings screen is usually easier to evaluate than enabling the feature across an entire application and trying to diagnose every change at once. Verify that the route renders correctly when opened directly and when reached through an internal link. That establishes a working baseline before you begin changing what gets prefetched.

Choose which links should fetch extra content

Partial Prefetching is most useful when developers distinguish between content that should be ready before a click and content that can load afterward. The default link behaviour can prepare the reusable route shell, while prefetch={true} requests a fuller prefetch for a selected destination. This is a useful choice for links where the next screen's primary content matters immediately, but it should not be applied indiscriminately to every link in a large collection. The extra request and cache work must earn its cost through a better interaction.

For example, consider a page displaying dozens of templates. A visitor may open only one template, so fetching detailed content for every visible card can create unnecessary work. Keep the default behaviour for the grid and reserve richer prefetching for destinations where there is a strong reason to expect a visit. For a small group of closely related settings pages, by contrast, preparing several likely destinations may be worthwhile because users commonly move between them during the same task.

A basic link can continue using the framework's standard behaviour:

import Link from 'next/link';

export function TemplateLink({
 templateId,
}: {
 templateId: string;
}) {
 return (
 
 Open template
 
 );
}

If the destination needs its cached, URL-specific content ready before the click, opt into the fuller prefetch deliberately:

 Open template

These examples show the link-level decision, not a guarantee that every dynamic request will finish before a visitor clicks. The destination must still be compatible with the caching and prefetching behaviour in use. Test the actual page, including its data dependencies, rather than assuming that adding a property to Link makes every component on the destination immediately available.

Control prefetching in large grids and lists

When a page contains many cards, a better strategy can be to request richer content only after the visitor shows interest in a particular destination. Interest can be indicated by hovering over a link with a mouse, focusing it with a keyboard, or touching it on a mobile device. This avoids treating every visible card as equally likely to be opened. It also preserves a useful accessibility detail: keyboard users should receive the same opportunity to trigger the behaviour as mouse users.

A custom link wrapper can represent this intent-based approach, but it needs careful testing because custom prefetch behaviour adds application code and maintenance. The example below illustrates the core decision; adapt the component to your project's types, accessibility requirements, and supported Next.js version before using it in production.

'use client';

import { useState } from 'react';
import Link from 'next/link';

type PrefetchLinkProps = {
 href: string;
 children: React.ReactNode;
};

export function PrefetchLink({
 href,
 children,
}: PrefetchLinkProps) {
 const [intent, setIntent] = useState(false);

 return (
 setIntent(true)}
 => setIntent(true)}
 => setIntent(true)}
 >
 {children}
 
 );
}

The state changes when a visitor interacts with the link, allowing the link to request a fuller prefetch instead of doing so for every card immediately. This is an illustrative pattern rather than a universal replacement for Next.js's built-in scheduler; check the behaviour supported by your installed version and existing Link wrappers. In particular, test repeated visits, keyboard focus, mobile interaction, and links that lead to dynamic pages. If the custom wrapper creates more requests than expected, simplify it or return to the framework's defaults.

Cache shared data without exposing private information

Prefetching is only part of the problem: the application must also decide which data can safely be reused. Public information, such as a published template description, may be suitable for a shared cache if its invalidation rules are correct. Personal settings, account details, and other user-specific data require a different approach because a cached result must never be served to the wrong person. A faster navigation experience is not worth a data-isolation bug.

Next.js provides caching directives and APIs for different reuse patterns, including 'use cache', 'use cache: remote', and 'use cache: private' in supported configurations. Their behaviour depends on the runtime and cache-handler setup, so self-hosted deployments should not assume that remote caching works like a managed hosting platform. Cache keys must include the relevant parameters, and updates must invalidate stale entries using the appropriate mechanisms. Before prefetching authenticated routes, verify that each user's data remains scoped to the correct account and that changes appear when expected.

Measure navigation speed and request cost together

A successful optimization should improve the experience users actually see, not just make a test pass or increase the amount of cached data. In its October 16, 2026 account of improving navigation in v0, the Next.js team described how richer prefetching increased requests to a template-detail route by 2.9 times before the team changed when those requests began. That is a useful warning: making more content available before a click can also multiply server work and data transfer. The result is a trade-off to measure, not evidence that Partial Prefetching is automatically faster or cheaper in every application.

Start with a repeatable navigation test that checks which important elements are visible immediately after the click. For a template page, that might include the title, header, and preview rather than a broad loading skeleton. Next.js documents an instant() helper for Playwright, a browser-testing framework, that can help test the UI available before navigation-dependent content arrives. Keep these checks in your automated test suite so that later changes to caching or routing do not silently bring back the loading state.

Measure the user experience alongside server-side and network costs. Track request volume, function invocations, data transfer, and cache reads and writes for the routes you change, and compare those measurements against the baseline. Test both a first visit and a return visit, since cached content can make those experiences differ. If navigation improves but requests or data transfer rise sharply, narrow the set of links that receive richer prefetching instead of assuming the extra cost is unavoidable.

Roll out the change route by route

Begin with a small set of high-value routes, verify that their main content appears when expected, and expand only when the measurements justify it. Check direct navigation, browser back and forward actions, stale-data behaviour, authenticated pages, and mobile interaction before broadening the rollout. If a route depends on rapidly changing information, decide how much staleness is acceptable before caching it for reuse. A carefully scoped rollout gives you a clear way to reverse a problematic change without undoing unrelated improvements.

For an existing Next.js application, the next step is to identify one navigation delay that users can reproduce, enable the relevant settings where appropriate, and keep a test for the expected result. Then compare the improved interaction with its request and cache costs. Partial Prefetching works best when the application prepares the content people are likely to need, rather than everything they might possibly open.