# 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:

```typescript
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).
    

![](https://cdn.hashnode.com/uploads/covers/6536409b7aa52ef9eb6c6b78/ef5f8805-9f85-4298-a3b3-b7173eff1dee.png align="center")

## 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.

![In 16.2, Next.js makes a prefetch request for every link, even if those links point to the same route](https://cdn.hashnode.com/uploads/covers/6536409b7aa52ef9eb6c6b78/0c64f27c-46a4-4c4f-bdc4-2735da460955.png align="center")

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](https://next-beats.dev/) is a music player built on the Next.js 16.3 Preview, with its source [on GitHub](https://github.com/vercel-labs/next-beats).

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:

```typescript
npm install next@preview
```