Next.js 16.3 Preview

Next.js 16.3 is almost here, and it's packed with a ton of improvements and let's see them in this post

1.Instant Navigation

For a while now, there’s been a valid, lingering debate
Server Components vs. SPAs (Single Page Applications).

While the Next.js App Router brought massive server-side benefits, critics and developers had one loud, consistent complaint: server-driven navigations could feel like clicking through an old-school website, not a snappy, modern app. Clicking a link meant waiting on a network roundtrip.

With the release of Next.js 16.3 (now in Preview), Vercel is tackling this head-on with Instant Navigations. They’ve essentially borrowed the best trick from SPAs—instant client-side loading shells—and combined it with the power of Server Components.

To try these new behaviors, enable the Cache Components flag in the next.config.ts file:

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  cacheComponents: true,
  // ...
};
 
export default nextConfig;

2.Stream, Cache or Block

Next.js 16.3 introduces a new Instant Insights dev panel that automatically flags slow navigations as errors in development. To clear the error and make your app feel instant, you have to make a very explicit choice when fetching data on the server:

• Stream with <Suspense>: Instantly show a loading skeleton or shell while the server streams the rest of the UI.

• Cache with 'use cache': Instantly serve a previously cached UI version (reused between requests).

• Block with export const instant = false;: Explicitly opt-out for specific routes (like a blog post where you absolutely want to wait for full server data before showing the page).

3.Rethinking Prefetching (Goodbye, Network Floods!)

If you’ve ever opened the Network tab in Next.js 14 or 15, you probably noticed a flurry of prefetch requests for every single link entering the viewport.

Next.js 16.3 introduces Partial Prefetching. Instead of hammering the server for every link, Next.js now prefetches a single, reusable loading shell per route and caches it on the client. If you have 20 links pointing to a /chat/[id] route, it prefetches just once.

Vercel is shipping tools to ensure your navigation stays fast:

• Playwright instant() Helper: A new E2E test helper that allows you to assert exactly what must be visible to the user immediately after a click, catching speed regressions before they hit production.

• Navigation Inspector: A new DevTools feature that lets you literally "pause" navigation at the shell level so you can visually audit what your users see instantly vs. what requires a network hop.

The Results? Vercel tested this internally on v0 before releasing it, and they watched route change navigation times plummet dramatically, closing the gap right down toward zero.

Demo to Playaround

If you'd like to see these features in a smaller, open-source codebase, Next Beats is a music player built on the Next.js 16.3 Preview, with its source on GitHub.

Cache Components is enabled, then Stream and Cache are used per route so every navigation lands on a real shell instead of a spinner. Partial Prefetching is on, so each route prefetches a single reusable shell on the client. The result is navigations that feel instant, the way they would in a single-page app.

To try out Instant Navigations for yourself, install the 16.3 Preview today:

npm install next@preview