Instant Navigations et Partial Prefetching (Next.js 16.3)

Définition

Ensemble opt-in de Next.js 16.3 (3 août 2026) qui redonne aux apps Server Components la réactivité d'une SPA : avec cacheComponents et partialPrefetching activés, Next.js extrait une coquille de chargement de n'importe quelle route (Suspense ou 'use cache') et la précharge côté client. Les DevTools ajoutent Instant Insights (navigations lentes) et un Navigation Inspector ; @next/playwright fournit instant() pour tester ce qui doit s'afficher sans réseau. Ces comportements deviendront le défaut d'une future version majeure.

Analogie

Le décor du prochain acte déjà monté en coulisses : au changement de scène, le rideau s'ouvre sans temps mort.

Exemple de code

// next.config.ts
export default { cacheComponents: true, partialPrefetching: true };

// Test Playwright : ce qui doit être visible instantanément
import { test, expect } from '@playwright/test';
import { instant } from '@next/playwright';

test('titre produit immédiat', 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');
  });
});

Cas d'usage

E-commerce ou dashboard où les clics semblaient lents malgré les Server Components ; garantir par test qu'un refactor ne rend pas une navigation bloquante.

Anti-pattern

Termes liés

Sources

• nextjs.org/blog/next-16-3