API de préchargement (preload, preinit, preconnect, prefetchDNS)

React 🟡 Mid

Définition

Fonctions de react-dom stables depuis React 19 (5 décembre 2024) qui indiquent au navigateur les ressources à venir : prefetchDNS(url), preconnect(url), preload(url, { as }) et preinit(url, { as }) (télécharge ET exécute un script ou applique une feuille de style). En SSR, React émet les balises correspondantes dans le <head> ; côté client, elles s'ajoutent dynamiquement.

Analogie

Réserver la table et commander l'entrée avant d'arriver au restaurant : quand vous vous asseyez, tout est déjà en route.

Exemple de code

import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';

function ProductPage() {
  preinit('/scripts/checkout.js', { as: 'script' });   // charge + exécute
  preload('/fonts/inter.woff2', { as: 'font' });       // charge seulement
  preconnect('https://cdn.images.example');            // handshake TLS
  prefetchDNS('https://analytics.example');
  return <Gallery />;
}

Cas d'usage

Réduire la latence perçue d'une interaction probable (paiement, galerie) en anticipant les ressources dès le rendu du composant.

Anti-pattern

Précharger des dizaines de ressources « au cas où » : on sature la bande passante du chargement initial.

Termes liés

#performance#react19

Sources

react.dev/blog/2024/12/05/react-19

Fiche mise à jour le 2026-09-27