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
Code de la leçon

Continuez votre apprentissage

Accédez aux 9 modules et 76 leçons de cette formation.

599€

Accès à vie · Garantie 30 jours

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 ! 🚀

Inclus
Quiz interactifTestez vos connaissances
Validez votre compréhension du module avec notre quiz interactif personnalisé.
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
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
3

Architecture des données

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

useEffect
useState

Débloquez ce quiz et tous les autres contenus