Créer un nouveau projet React

Vous pouvez tout à fait utiliser React sans framework ; c’est d’ailleurs ainsi qu’on utilise React pour une partie de votre page. Cependant, si vous créez une nouvelle appli ou un site entièrement avec React, nous recommandons l’utilisation d’un framework.

En voici les raisons.

Même si, au départ, vous n’avez pas besoin d’un gestionnaire de routes ou de charger des données, vous finirez sans doute par ajouter des bibliothèques pour ça. Au fur et à mesure que votre bundle JavaScript grandit avec chaque nouvelle fonctionnalité, vous devrez peut-être trouver un moyen de découper le code pour chaque route individuellement. Lorsque vos besoins en matière de chargement de données se complexifieront, vous risquez de rencontrer des cascades de chargements réseau client-serveur qui ralentiront considérablement votre appli. Lorsque votre public comprendra davantage d’utilisateurs avec de faibles bandes passantes et des appareils bas de gamme, vous aurez probablement besoin de générer du HTML à partir de vos composants pour afficher le contenu plus tôt (soit sur le serveur, soit en amont lors du build). Modifier votre configuration pour exécuter une partie de votre code sur le serveur ou au *build peut s’avérer très délicat.

Ces problèmes ne sont pas spécifiques à React. C’est pourquoi Svelte a SvelteKit, Vue a Nuxt, etc. Pour résoudre ces problèmes par vous-même, il vous faudrait intégrer votre bundler à votre gestionnaire de routes et à votre bibliothèque de chargement de données. Il n’est pas difficile d’obtenir un premier jet, mais la création d’une appli qui se charge rapidement même lorsqu’elle grandit fortement au fil du temps, c’est une affaire pleine de subtilités. Vous voudrez envoyer le minimum de code applicatif, mais en un seul aller-retour client-serveur, en parallèle avec toutes les données requises pour la page. Vous souhaiterez probablement que la page soit interactive avant même que votre code JavaScript ne soit exécuté, afin de prendre en charge l’amélioration progressive. Vous souhaiterez peut-être générer un dossier de fichiers HTML entièrement statiques pour vos pages de marketing, qui pourront être hébergés n’importe où et fonctionneront même avec JavaScript désactivé. La mise en place de ces possibilités demande énormément de travail.

Les frameworks React présentés sur cette page résolvent les problèmes de ce type par défaut, sans travail supplémentaire de votre part. Ils vous permettent de commencer de manière très légère et de faire évoluer votre appli en fonction de vos besoins. Chaque framework React dispose d’une communauté, ce qui facilite la recherche de réponses aux questions et la mise à jour des outils. Les frameworks donnent également une structure à votre code, ce qui vous aide, vous et les autres, à conserver le contexte et vos compétences d’un projet à l’autre. Inversement, avec votre propre système, il est plus facile de rester bloqués sur des dépendances obsolètes, et vous finirez essentiellement par créer votre propre framework—mais un framework sans communauté ni processus de mise à niveau (et s’il ressemble à ceux que nous avons construits par le passé, il est conçu de manière plus aléatoire).

Si votre appli a des contraintes inhabituelles qui ne sont pas bien traitées par ces frameworks, ou si vous préférer répondre à ces problématiques vous-mêmes, vous pouvez mettre en place votre propre configuration personnalisée autour de React. Prenez react et react-dom sur npm, mettez en place votre processus de build sur-mesure avec un bundler comme Vite ou Parcel, et ajoutez d’autres outils lorsque vous en aurez besoin pour la gestion des routes, l’exportation statique ou le rendu côté serveur, et plus encore.

Le bundler dans l’App Router de Next.js implémente entièrement la spécification officielle des Composants Serveurs React. Ça vous permet de mélanger des composants exécutés au build, côté serveur et interactivement côté client dans une seule et même arborescence React.

Par example, vous pouvez écrire un Composant Serveur React en tant que fonction async qui lit à partir d’une base de données ou d’un fichier. Vous pouvez alors transmettre ces données aux composants interactifs côté client :

// Ce composant s’exécute *seulement* côté serveur (ou pendant le build).
async function Talks({ confId }) {
  // 1. Vous êtes sur le serveur, vous pouvez donc communiquer avec votre couche de données.
  // Un point d’accès API n’est pas nécessaire.
  const talks = await db.Talks.findAll({ confId });

  // 2. Ajoutez toute la logique de rendu que vous voulez.
  // Ça n’alourdira pas votre bundle JavaScript.
  const videos = talks.map(talk => talk.video);

  // 3. Transmettez les données aux composants qui s’exécuteront dans le navigateur.
  return <SearchableVideoList videos={videos} />;
}

L’App Router de Next.js intègre également le chargement de données avec Suspense. Ça vous permet de spécifier un état de chargement (comme une interface de substitution) pour différentes parties de votre interface utilisateur directement dans votre arborescence React :

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

Les Composants Serveur et Suspense sont des fonctionnalités de React plutôt que de Next.js. Cependant, leur adoption au niveau du framework nécessite une adhésionet un travail d’implémentation significatif. Pour l’instant, l’App Router de Next.js en propose l’implémentation la plus complète. L’équipe React travaille avec les équipes de bundlers pour faciliter l’implémentation de ces fonctionnalités dans la prochaine génération de frameworks.