Améliorer la performance d’une app React Router 7 : la méthode

Découvre comment booster le SEO et la vitesse de ton app React Router 7 : checklist, TTFB, bundle JS, images, scripts et astuces concrètes.

5 min read
Déverrouillez votre potentiel

avec React Router 7

Vous en avez marre de...

❌ perdre du temps à chercher des informations éparpillées
❌ ne pas avoir de retour sur votre progression
Assistant IA spécialisé

Posez vos questions 24/7 à notre IA experte en React Router 7

Quiz interactifs

Validez vos acquis avec des quiz personnalisés et un feedback instantané

9 modules
57 leçons
Accès à vie
299.49€
-35%

Mesurer d’abord, optimiser ensuite

Avant de toucher une seule ligne de code, ouvre le laboratoire de référence : PageSpeed Insights. Copie l’URL de ta prod et regarde la couleur du voyant :

  • vert ≥ 90 : tu peux encore gratter quelques ms, mais rien d’urgent ;
  • orange 50-89 : c’est la zone où 80 % des sites stagnent – on veut la dépasser ;
  • rouge < 50 : Google te pénalise déjà, tes utilisateurs aussi.

Dans la vidéo du transcript j’ai scanné algomax.fr : 35/100 mobile. Pourquoi ? Principalement :

  1. TTFB d’1,5 s : serveur et requêtes BDD lents.
  2. Vidéo de 7 Mo en fond.
  3. Scripts tiers (Google Analytics, reCAPTCHA, Facebook Pixel) chargés trois fois.

On va voir comment corriger ces points dans un projet React Router 7.

Réduire le Time To First Byte (TTFB)

Le TTFB dépend de deux facteurs : – la puissance du VPS ; – le travail que fait ton loader avant de rendre le HTML.

1. Garde les requêtes critiques dans les loaders parents

app/routes/_layout.tsx
1
export async function loader() {

2
  // ^? Appelé *à chaque* navigation imbriquée

3
  return {

4
    user: await getOptionalUser(),

5
    // pas de requête lourde ici !  <──

6
  };

7
}

Place la requête article, produit, etc. dans la route feuille ; ainsi la page d’accueil ne paye pas cette facture.

2. Supprime les “sleep” déguisés

ts utils/db.ts
1
- await new Promise((r) => setTimeout(r, 500)) // debug oublié 😱

Ces micro‐latences sont invisibles en dev mais mortelles en prod.

Alléger le JavaScript client

Active le split route modules

Depuis React Router v7.3, un flag compile un chunk par route :

react-router.config.ts
1
export default {

2
  future: {

3
    unstable_splitRouteModules: true, // ✂️ 1 fois, puis on oublie

4
  },

5
} as const;

Résultat : la page “/blog” ne télécharge pas le code du tableau de bord.

Charge les scripts tiers en Web Worker (Partytown)

Terminal
1
npm i @builder.io/partytown
app/root.tsx
1
import { Partytown } from "@builder.io/partytown/react";

2


3
export function Layout({ children }: { children: React.ReactNode }) {

4
  return (

5
    <html lang="fr">

6
      <head>

7
        {/* Scripts tiers déplacés vers Partytown */}

8
        <Partytown debug={false} forward={["dataLayer.push"]} />

9
      </head>

10
      <body>{children}</body>

11
    </html>

12
  );

13
}

Tu continueras d’utiliser window.dataLayer.push() (Google Tag Manager), mais le thread principal reste libre : +5-10 pts PageSpeed.

Optimiser les images (le vrai “gros” de ta note)

Utilise un CDN d’images

Cloudflare Images ou ImageKit génèrent une miniature adaptée à la taille de l’écran :

app/components/Img.tsx
1
const cdn = "https://ik.imagekit.io/algomax/tr:w-640/";

2
export function Img({ src, alt }: { src: string; alt: string }) {

3
  return <img src={cdn + src} alt={alt} width={640} height={360} loading="lazy" />;

4
}

Précharge la bannière au LCP

app/routes/_landing.tsx
1
export const links: LinksFunction = () => [

2
  { rel: "preload", as: "image", href: "/images/hero.webp" },

3
];

Google comptabilise cette image comme Largest Contentful Paint ; gagne 200 ms rien qu’en la déclarant.

Mettre le CSS et les polices dans la fast-lane

app/root.tsx
1
export const links: LinksFunction = () => [

2
  { rel: "preconnect", href: "https://fonts.googleapis.com" },

3
  { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },

4
  { rel: "preload", as: "style", href: "/styles/app.css" },

5
];

Couplé avec les leçons « Précharger un fichier CSS » et « Headers Cache-Control », ton CSS est prêt avant même que le HTML arrive.

Déléguer les assets statiques à Caddy

Caddyfile
1
@static path *.css *.js *.webp *.png *.svg

2
handle @static {

3
  root * /var/www/rr7/public

4
  file_server

5
  header Cache-Control "public, max-age=31536000, immutable"

6
}

Ton conteneur React Router ne sert plus les images : CPU économisé. Le header immutable permet à Chrome de garder le fichier 1 an.

Nettoyer les librairies inutilisées

Analyse le bundle avec source-map-explorer.

Terminal
1
npm i -D source-map-explorer

2
npm run build

3
npx source-map-explorer build/client/**/*.js

Dans la vidéo, reCAPTCHA pesait 14 % du bundle et était chargé 3 fois. ✅ Solution : Partytown + suppression des imports dupliqués.

Checklist « Performance » à épingler

1
- [ ] TTFB < 500 ms (PageSpeed / WebPageTest)

2
- [ ] LCP < 2,5 s sur mobile

3
- [ ] Bundle JS < 150 kB gzippé

4
- [ ] Aucune image > 500 kB non optimisée

5
- [ ] Header Cache-Control présent sur CSS/JS/images

6
- [ ] Scripts tiers déportés en Web Worker

7
- [ ] Preload des assets critiques (CSS, font, LCP)

Ressources externes

Conclusion

La performance n’est pas une cerise décorative : c’est un facteur de positionnement SEO et de conversion. Avec React Router 7 tu disposes de :

  • loaders côté serveur pour envoyer uniquement le HTML utile ;
  • un plugin Vite pour découper ton bundle ;
  • la simplicité de Partytown pour caser les scripts marketing hors du main thread.

Applique la checklist, repasse un coup de PageSpeed et vise le green zone ! Ton futur toi et tes visiteurs te diront merci.

Premium
Quiz interactif
Testez vos connaissances et validez votre compréhension du module avec notre quiz interactif.
1

Comprendre les concepts fondamentaux

Quelle est la principale différence entre les composants client et serveur dans React ?

Les composants client s'exécutent uniquement dans le navigateur
Les composants serveur peuvent utiliser useState
Les composants client sont plus rapides
Il n'y a aucune différence significative
2

Optimisation des performances

Quelle technique est recommandée pour éviter les rendus inutiles dans React ?

Utiliser React.memo pour les composants fonctionnels
Ajouter plus d'états locaux
Éviter d'utiliser les props
Toujours utiliser les class components
3

Architecture des données

Quel hook permet de gérer les effets de bord dans un composant React ?

useEffect
useState
useMemo
useContext
4

Gestion des erreurs

Comment implémenter la gestion des erreurs pour les requêtes API dans React ?

Utiliser try/catch avec async/await
Ignorer les erreurs
Toujours afficher un message d'erreur
Rediriger l'utilisateur
5

Déploiement et CI/CD

Quelle est la meilleure pratique pour déployer une application React en production ?

Utiliser un service CI/CD comme GitHub Actions
Copier les fichiers manuellement via FTP
Envoyer le code source complet
Ne jamais mettre à jour l'application

Débloquez ce quiz et tous les autres contenus premium en achetant ce cours

Dans cette leçon