Comment précharger un fichier CSS côté serveur

Dans cette leçon on va apprendre à précharger une feuille de style, une police ou une image avec la fonction links.

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
45 leçons
Accès à vie
299.00€
-50%

Dans ce lesson, tu vas apprendre à précharger un fichier CSS (ou toute autre ressource) uniquement sur les pages qui en ont besoin, grâce à l’API links() de React Router 7.
Tu verras comment :

  • Préconnecter un domaine externe pour réduire la latence
  • Précharger un CSS avant le rendu (prévenir le FOIT / FOUC)
  • Cibler le preload au niveau d’une route spécifique
  • Comprendre le rôle de <Links /> dans le head généré côté serveur

Pourquoi précharger une ressource CSS ?

Quand tu relies un fichier CSS (ou une police web) avec un simple

1
<link rel="stylesheet" href="/styles/users.css" />

le navigateur démarre sa requête après avoir parsé le HTML et le JavaScript.
Résultat :

  • Flash of Unstyled Text (FOUT) ou Flash of Invisible Text (FOIT)
  • Layout shift au chargement
  • Impact négatif sur le Largest Contentful Paint (LCP) et ton SEO

Mise en place avec React Router 7

1. Préconnecter un domaine externe

Dans ton app/root.tsx, utilise la méthode links() pour déclarer un préconnect :

app/root.tsx
1
import type { LinksFunction } from "./+types/root";

2


3
export const links: LinksFunction = () => [

4
  // ^? On préconnecte d'abord google-fonts pour accélérer la TLS

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

6
  {

7
    rel: "preconnect",

8
    href: "https://fonts.gstatic.com",

9
    crossOrigin: "anonymous",

10
  },

11
];

Le composant <Links /> insère ces balises avant le rendu du <body>.
Ainsi, la handshake TLS est lancée plus tôt.

2. Précharger le CSS dans une route spécifique

Imaginons que sur la page /users tu as un CSS dédié :
app/styles/users.css

app/styles/users.css
1
/* Styles spécifiques à la page Utilisateurs */

2
.user-list {

3
  list-style: none;

4
  padding: 0;

5
}

6
.user-list li {

7
  margin-bottom: 1rem;

8
}

Dans app/routes/users.tsx, utilise links() pour précharger ce fichier :

app/routes/users.tsx
1
import type { LinksFunction } from "react-router";

2


3
export const links: LinksFunction = () => {

4
  return [

5
    // ^? on indique au navigateur de précharger ce CSS avant le render

6
    { rel: "preload", as: "style", href: "/styles/users.css" },

7
  ];

8
};

Le résultat généré côté serveur :

1
<link rel="preload" as="style" href="/styles/users.css" />

2
<link rel="stylesheet" href="/styles/users.css" />

3. Charger et utiliser le CSS

Ensuite, dans ton composant React, importe simplement le CSS ou ajoute-le globalement :

app/root.tsx
1
import "./styles/users.css"; // ^? Import standard (Tailwind ou CSS global)

Ou si tu utilises un bundler, fais un import "/styles/users.css"; dans ton root.tsx.

Exemple complet

app/root.tsx
1
import type { LinksFunction } from "./+types/root";

2
import { Links, Meta, Outlet } from "react-router";

3


4
export const links: LinksFunction = () => [

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

6
  {

7
    rel: "preconnect",

8
    href: "https://fonts.gstatic.com",

9
    crossOrigin: "anonymous",

10
  },

11
  { rel: "stylesheet", href: "/styles/app.css" },

12
];

13


14
export default function App() {

15
  return (

16
    <html lang="fr">

17
      <head>

18
        <Meta />

19
        <Links />

20
      </head>

21
      <body>

22
        <Outlet />

23
      </body>

24
    </html>

25
  );

26
}
app/routes/users.tsx
1
import { useLoaderData } from "react-router";

2
import type { LinksFunction } from "react-router";

3


4
// Préchargement CSS spécifique

5
export const links: LinksFunction = () => [

6
  { rel: "preload", as: "style", href: "/styles/users.css" },

7
];

8


9
export default function Users() {

10
  const { users } = useLoaderData();

11
  return (

12
    <ul className="user-list">

13
      {users.map((u) => (

14
        <li key={u.id}>{u.name}</li>

15
      ))}

16
    </ul>

17
  );

18
}
app/styles/users.css
1
.user-list {

2
  list-style: none;

3
  padding: 0;

4
}

5
.user-list li {

6
  margin-bottom: 1rem;

7
}

Points clés

  • Le links() de React Router 7 te permet de déclarer toutes les balises <link> :
    • rel="preconnect" pour démarre la handshake TLS en amont.
    • rel="preload" as="style" pour précharger un CSS.
    • rel="stylesheet" pour appliquer le CSS.
  • <Links /> injecte ces balises dans le <head> avant tout rendu du <body>.
  • Ciblage par route : place links() dans la route désirée pour éviter les surcharges.
  • Combine preconnect + preload pour un LCP plus rapide et moins de layout shift.
  • N’oublie pas crossOrigin si ta ressource vient d’un CDN externe.

Exercices rapides

  1. Précharge une police Google Fonts

    • Dans root.tsx, ajoute un <link rel="preload" as="font" ...>
    • N’oublie pas crossOrigin: "anonymous" et le bon type="font/woff2".

  2. Préparer un script externe

    • Dans app/routes/dashboard.tsx, précharge un script <link rel="preload" as="script" href="/js/dashboard.js" />.
    • Vérifie dans l’inspecteur réseau que as="script" est bien pris en compte.

  3. Préconnect à une API

    • Sur toutes tes pages, préconnecte-toi à https://api.example.com.
    • Place-le dans root.tsx avec rel="preconnect".

Bonne optimisation ! 🚀

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