Le fichier react-router.config.ts

Le fichier de configuration "react-router.config.ts"

Ce fichier te permet de configurer le comportement de React Router 7.

1
import type { Config } from "@react-router/dev/config";
2

3
export default {
4
  ssr: true,
5
  serverModuleFormat: "esm",
6
  future: {
7
    unstable_optimizeDeps: true,
8
    unstable_splitRouteModules: false,
9
    unstable_viteEnvironmentApi: false,
10
    unstable_middleware: false,
11
  },
12
} satisfies Config;
13

Mode SSR vs Mode SPA

Par défaut, le mode SSR (Server-Side Rendering) est activé, ce qui est généralement une bonne pratique.

Tu peux désactiver le mode SSR et activer le mode SPA (Single Page Application) avec l'instruction ssr: false.

Idéal si tu utilises une autre solution pour le chargement des données comme react-query, ou que tu souhaites effectuer le chargement des données côté client.

Fonctionnalités expérimentales

Ce fichier t'offre aussi la possibilité d'activer des fonctionnalités expérimentales de React Router 7, comme le support middleware. Découvrons ensemble l'intérêt de chaque fonctionnalité.

unstable_middleware

Le middleware est particulièrement utile pour exécuter du code avant chaque chargement de page, par exemple pour vérifier l'authentification de l'utilisateur. Cela simplifie grandement la gestion de la sécurité sur plusieurs pages. Au lieu vérifier l'autorisation de ton utilisateur sur chaque page, tu le déclares qu'une seule fois, et tu définis les pages qui vont appeler cette méthode.

unstable_viteEnvironmentApi

React Router 7 est un plugin de Vite. Dans la version 6, Vite a introduit l'Environment API, une nouvelle technologie qui permet aux créateurs de framework de créer "plusieurs environnements Vite" pour le même framework.

Tu ne seras pas amené à l'utiliser personellement, mais React Router 7 l'utilise pour ajouter le support React Server Components, une fonctionnalité très attendue.

unstable_splitRouteModules

La fonctionnalité Split Route Modules est une optimisation visant à accélérer le chargement de ta page, si tu utilises les clientLoader. Personnellement je n'ai pas encore trouvé l'usage de la méthode clientLoader, et je n'ai pas activé cette fonctionnalité.

Elle n'a aucun impact sur le code que tu écris.

unstable_optimizeDeps

En mode dev, Vite effectue une optimisation des node_modules pour rafraîchir ton application React Router plus rapidement. J'ai activé cette option sur toutes mes applications. Mais on va pas se le cacher, je n'ai ressenti aucune différence jusqu'à présent.

Rendu statique avec prerender

Par défaut, tu charges toutes les pages côté serveur (sauf si tu utilises le mode SPA).

Cela signifie qu'à chaque chargement d'une de tes pages, tu vas générer une réponse HTML qui sera envoyée à l'utilisateur (côté client).

Mais avant d'afficher la page, tu vas d'abord exécuter la méthode loader (qu'on découvrira plus en détail dans le prochain module). C'est dans cette méthode que tu vas récupérer des données dynamiques (comme accéder à ta base de donnée, ou contacter une API externe).

Cela peut prendre du temps, en fonction des performances de ton serveur, de l'emplacement du client, et de la donnée que tu charges.

La méthode prerender est une fonction que tu déclares dans le fichier react-router.config.ts.

Elle te permet de déclarer certaines pages de ton site comme étant statiques.

Une page statique sera donc chargée côté serveur au moment du build, et transformée en page HTML. Cette optimisation permet de ne pas avoir à effectuer ce travail lorsqu'un visiteur essaie d'accéder à ta page.

C'est un peu comme si la page avait été mise en cache. Tu as fait le travail en amont, parce que tu sais que cette page sera chargée souvent.

Généralement, tu effectues un rendu statique des pages qui ne changent pas souvent de contenu. Comme une page blog, avec un article que tu ne comptes plus modifier.

Pour les pages très dynamiques, tu n'as pas intérêt à activer l'option prerender.

Pour déclarer une page comme étant statique, tu dois renvoyer un tableau de chaînes de caractère (*string). Chaque string représente le segment relatif de ton application.

Exemple : /blog pour la page blog, et / pour la page d'accueil.

Pour les pages dynamiques, tu peux déclarer la méthode prerender comme étant asynchrone, charger les articles depuis ton CMS, et renvoyer leurs segments d'URL.

1
import type { Config } from "@react-router/dev/config";
2
import { href } from "react-router";
3
import { getArticleLinks } from "~/server/strapi.server";
4

5
export default {
6
  serverModuleFormat: "esm",
7
  future: {
8
    unstable_optimizeDeps: true,
9
    unstable_splitRouteModules: false,
10
    unstable_viteEnvironmentApi: false,
11
    unstable_middleware: true,
12
  },
13

14
  async prerender() {
15
    // Récupération des articles côté serveur depuis le CMS
16
    const articles = await getArticleLinks();
17

18
    const staticRoutes = [
19
      // Rendu statique de la page d'accueil
20
      "/",
21
      // Rendu statique de la page blog, listant tous les articles
22
      href("/blog"),
23
    ];
24
    const dynamicRoutes = articles.map((article) =>
25
      // Rendu dynamique de chaque article
26
      href("/blog/:slug", { slug: article.slug }),
27
    );
28
    const prerenderedRoutes = [...staticRoutes, ...dynamicRoutes];
29
    return prerenderedRoutes;
30
  },
31
} satisfies Config;

En résumé, ce fichier de configuration est essentiel pour adapter ton application à ton besoin spécifique. Tu le configures généralement une fois, puis tu n'y touches plus.