Next.js 16.3: Instant Navigations | Next.js

Back to BlogWednesday, June 24th 2026<br>Next.js 16.3: Instant Navigations<br>Posted byAndrew Clark@acdlite<br>Josh Story@joshcstory

+8

Next.js Team12 members

Next.js 16.3 Preview is ready for public testing!

We've published a new Next.js release to npm using the @preview tag, so<br>you can try out 16.3 starting today. We expect to ship a polished stable<br>release in the coming weeks.

We'd love to hear any feedback you have about the preview on<br>GitHub.

Next.js 16.3 is almost here, and it's packed with a ton of improvements: better rendering under stress thanks to native Node.js streams, faster startup times in local dev, and deeper integration with agent-based workflows.

We'll be covering these features in the coming weeks as we prepare a stable release. But today, we'd like to focus on one new feature we're calling Instant Navigations — a suite of tools that bring the responsiveness of client-driven SPAs to Next.js, without sacrificing the benefits that come with its server-driven model.

Let's see how this feature addresses the long-standing (and valid!) criticism that Server Components can make apps feel unresponsive.

Instant Navigations

One of the most common frustrations we hear about Next.js apps is that navigations feel slow.

In a server-driven app, navigating usually requires a network roundtrip:

You click a link.

Nothing happens.

Then the server responds, and the next page appears.

This is not necessarily bad, and it can work well for content-driven websites like newspapers and blogs. But it does make the experience "feel like a website". It's not snappy. Compare this to how client-driven apps do navigations:

You click a link.

Instantly, you see a shell of the next page (with some data still loading).

Then the server responds, and the next page fully reveals.

This is a common reason why many developers prefer to create SPAs (single-page apps). Even though the server-driven request/response paradigm has many advantages, instant navigations still feel better for many kinds of apps.

We're fixing this

We've heard your feedback about this loud and clear.

In Next.js 16.3, we are shipping new opt-in behaviors that let you have the best of both worlds: server-driven apps with instant navigations. You get the full benefits of a server, but navigations are instant like in a single-page app.

Let's have a look at how this works.

First, enable Cache Components

To try these new behaviors, enable the Cache Components flag:

next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {<br>cacheComponents: true,<br>// ...<br>};

export default nextConfig;

Over the last year, we've been simplifying Next.js back to its roots: dynamic by default, with no hidden or implicit caching. This flag enables those new behaviors, and it will become a default in a future major version of Next.js.

Stream, Cache, or Block

Now, when a route awaits some data on the server, you will be presented with a choice between a few options:

The new Instant Insights panel automatically surfaces slow navigations

What do these options mean?

To make a navigation instant, you "turn" an asynchronous operation into something that can be available instantly:

Stream with . The user will instantly see a loading state (with more UI streaming in after).

Cache with 'use cache'. The user will instantly see a previously cached UI (reused between requests).

In both cases above, the navigation will feel SPA-like and instant to the user.

However, sometimes you might want to make a certain navigation server-bound. For example, a blog might choose to never show a loading shell for posts. For those cases, you can tell Next.js that you want this navigation to Block :

// in page.tsx or layout.jsx<br>export const instant = false;

Then the error dialog will go away.

Notice how this puts you in control. If you want your server-driven app to react to link clicks instantly—without waiting for the network—then you Stream or Cache. If you want some routes to delay navigations, then you Block.

Agent skill

If you're looking to adopt Cache Components for the first time in an existing<br>app, we've put together a Skill you can use to have your agent walk you<br>through the process.

Copy prompt

Keeping navigations instant

With Instant Insights, we've made slow navigations an error in development. To more easily catch regressions to your instant routes after changes and refactorings, we have also provided an instant test helper for Playwright tests:

import { expect, test } from '@playwright/test';<br>import { instant } from '@next/playwright';

test('product title is available immediately', async ({ page }) => {<br>await page.goto('/products/shoes');

// Assert what's visible without waiting for network<br>await instant(page, async () => {<br>await page.click('a[href="/products/hats"]');<br>await expect(page.locator('h1')).toContainText('Baseball Cap');<br>await expect(page.getByText('Checking...