Noqta
écrits/blog/2026/06
● Blog28 juin 2026·6 min

Next.js 16.3 Instant Navigations : Guide Développeur

Guide pratique de Next.js 16.3 Instant Navigations : Cache Components, modes Stream/Cache/Block et Partial Prefetching pour un routage type SPA.

Équipe Noqta
·EN · FR · AR

Next.js 16.3 Preview est sorti le 25 juin 2026, et la nouveauté phare se nomme Instant Navigations — une suite d'outils opt-in qui referme enfin l'écart entre les applications Next.js côté serveur et la fluidité d'une SPA. Combinée au Partial Prefetching, cette release change la manière de concevoir le routage en App Router.

Ce guide passe en revue les nouvelles primitives, les options de configuration et la marche à suivre pour migrer une route existante.

Pourquoi les navigations semblaient lentes

Dans une application classique à base de Server Components, cliquer sur un lien déclenche un aller-retour réseau. Tant que le serveur n'a pas répondu, rien ne bouge à l'écran. Pour un site éditorial c'est acceptable ; pour un dashboard, une messagerie ou un e-commerce, l'expérience paraît cassée à côté d'une SPA React qui affiche immédiatement la coque de la page suivante.

Next.js 16.3 résout le problème sans renoncer au modèle serveur. On conserve les Server Components, le streaming et le data fetching par route — mais chaque navigation aboutit à une coque visible en une seule frame.

Étape 1 — Activer Cache Components

Tout commence par un flag dans next.config.ts :

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

cacheComponents est le drapeau de tête du nouveau modèle "dynamique par défaut" que Vercel construit depuis un an. Pas de cache caché, pas de mémoïsation implicite — vous activez chaque frontière vous-même. L'équipe a confirmé que ce comportement deviendra le défaut dans une future version majeure.

Une fois activé, chaque route qui attend des données serveur tombe dans l'une des trois catégories : Stream, Cache ou Block.

Étape 2 — Choisir Stream, Cache ou Block par route

Quand une route attend des données, le nouveau panneau Instant Insights dans les DevTools de Next.js la signale comme non instantanée. Votre travail consiste à la convertir vers l'un des trois modes.

Stream avec <Suspense>

Enveloppez la partie asynchrone lente dans un <Suspense> et fournissez un fallback. L'utilisateur voit immédiatement la coque, le contenu réel arrive en streaming.

import { Suspense } from 'react';
import { ProductDetails } from './product-details';
 
export default function ProductPage({ params }: { params: { id: string } }) {
  return (
    <main>
      <h1>Produit</h1>
      <Suspense fallback={<p>Vérification du stock...</p>}>
        <ProductDetails id={params.id} />
      </Suspense>
    </main>
  );
}

Utilisez Stream pour des données per-requête non mises en cache — stocks, prix personnalisés, statut en direct.

Cache avec 'use cache'

Si les données peuvent être partagées entre requêtes, marquez le composant ou la fonction avec la directive 'use cache'. Next.js réutilisera le rendu précédent et fera la vérification de fraîcheur en arrière-plan.

'use cache';
 
export async function CategorySidebar() {
  const categories = await fetch('https://api.example.com/categories').then(r => r.json());
  return (
    <nav>
      {categories.map(c => (
        <a key={c.slug} href={`/c/${c.slug}`}>{c.name}</a>
      ))}
    </nav>
  );
}

L'UI mise en cache s'affiche instantanément. Cache convient à la navigation, aux taxonomies, à tout contenu qui ne change pas par utilisateur.

Block quand l'ancien comportement convient

Certaines routes — articles long-form, pages légales — ne doivent jamais montrer de coque. Dites à Next.js de bloquer :

export const instant = false;

L'avertissement Instant Insights disparaît et la route fonctionne en mode serveur classique.

Étape 3 — Activer le Partial Prefetching

Avant, Next.js envoyait une requête de prefetch par <Link> visible. Une barre latérale avec vingt conversations déclenchait vingt prefetches. Avec le Partial Prefetching, Next.js récupère une coque réutilisable par route et la met en cache côté client pour toute la session.

Activez-le aux côtés de Cache Components :

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

Le gain dans l'onglet Network est spectaculaire. Là où l'on voyait des dizaines de prefetches dupliqués au scroll, il n'y a plus qu'une coque par route distincte. L'équipe Vercel indique que ce mécanisme servira aussi de base à la navigation hors-ligne dans les futures versions.

Étape 4 — Prefetch par lien quand c'est utile

Le prefetch de coque seule est le bon défaut. Parfois, vous voulez plus de contenu prêt — par exemple, l'en-tête d'une conversation qui doit apparaître avant les messages. Utilisez <Link prefetch> :

import Link from 'next/link';
 
export function ChatLink({ id, title }: { id: string; title: string }) {
  return (
    <Link href={`/chat/${id}`} prefetch>
      {title}
    </Link>
  );
}

Next.js ne rendra pas pour autant toute la route en profondeur — seulement ce qui est synchrone ou marqué 'use cache'. Le compromis tout-ou-rien d'avant disparaît.

Pour aller plus loin au prix d'une charge serveur accrue, étendez le prefetch au runtime :

export const prefetch = 'allow-runtime';

Étape 5 — Vérifier avec le Navigation Inspector

Les DevTools de Next.js intègrent désormais un Navigation Inspector qui met en pause chaque navigation sur la coque, pour voir exactement ce qui est préfetché par route. Un clic sur Resume et la page complète s'affiche. C'est le moyen le plus rapide de repérer les routes qui sont passées en Block alors qu'elles auraient dû être en Stream.

Étape 6 — Verrouiller avec Playwright

Pour éviter les régressions, le paquet @next/playwright expose un helper instant(). Encapsulez vos assertions et le test échoue si la navigation a besoin d'un appel réseau pour afficher la coque :

import { expect, test } from '@playwright/test';
import { instant } from '@next/playwright';
 
test('le titre produit est disponible immédiatement', async ({ page }) => {
  await page.goto('/products/shoes');
 
  await instant(page, async () => {
    await page.click('a[href="/products/hats"]');
    await expect(page.locator('h1')).toContainText('Casquette');
    await expect(page.getByText('Vérification du stock...')).toBeVisible();
  });
 
  await expect(page.getByText('12 en stock')).toBeVisible();
});

Avec une CI, votre budget de performance est imposé par les tests et non par l'intuition.

Plan de migration pour un projet App Router

  1. npm install next@preview sur une branche dédiée.
  2. Ajoutez cacheComponents: true dans next.config.ts. Lancez le build et listez les avertissements Instant Insights.
  3. Parcourez chaque route signalée. La donnée est-elle per-requête, par utilisateur ou partagée ? Choisissez Stream, Cache ou Block en conséquence.
  4. Encapsulez les portions async dans <Suspense> avec un fallback utile. Évitez les spinners génériques — un squelette à la forme de la mise en page rend la coque vraiment instantanée.
  5. Annotez les fonctions et composants partageables avec 'use cache'. Définissez des tags ou des durées de cache explicites si vous comptez sur la revalidation.
  6. Activez partialPrefetching: true. Vérifiez en production le motif "une seule coque par route" dans le Network.
  7. Ajoutez des tests Playwright instant() sur vos chemins de navigation les plus chauds.
  8. Utilisez <Link prefetch> ciblé sur les liens où l'extension du cache vaut le payload supplémentaire.

Quand Block est la bonne réponse

Les Instant Navigations ne sont pas gratuites. Cache Components vous pousse à des frontières plus petites et plus disciplinées. Si une route est rarement visitée, volontairement rendue côté serveur, ou bâtie autour de contenu long-form sans coque partagée, mettez instant = false et passez à autre chose. L'équipe Vercel a explicitement conçu Block pour que personne ne soit forcé de refactorer chaque page legacy.

Ce que cela change pour les équipes MENA

Pour les clients Noqta dont les utilisateurs naviguent depuis des réseaux mobiles inégaux en Tunisie, en Arabie Saoudite ou ailleurs dans la région, le bénéfice est concret. Une coque rendue en une frame masque la latence vers une région edge à Francfort ou Bahreïn, même sur un réseau cellulaire saturé. Couplé à 'use cache' sur le chrome partagé — nav, arborescence de catégories, sélecteur de devise — la première navigation n'est plus dominée par le RTT.

Calendrier de la version stable

Next.js 16.3 Preview a été publié le 25 juin 2026, la version stable est attendue dans les semaines qui viennent. L'équipe Vercel a éprouvé les nouveaux comportements sur v0 avant la sortie, avec des temps de navigation tendant vers zéro sur les routes les plus problématiques.

Si vous opérez une application Next.js en production, c'est la mise à jour pour laquelle un sprint dédié se justifie. Le changement de modèle mental est modeste — Stream, Cache ou Block — et le gain perçu par l'utilisateur est la plus grande amélioration de navigation depuis l'App Router lui-même.

Sources : Next.js 16.3 : Instant Navigations, Guide Prefetching Next.js, Releases vercel/next.js.