Créer un nouveau projet React

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

En voici les raisons.

Même si vous n’avez pas besoin d’un gestionnaire de routes ou de récupération de données au départ, vous aimeriez ajouter des bibliothèques. Au fur et à mesure que votre bundle JavaScript devient énorme avec de nouvelles fonctionnalités, vous devrez peut-être trouver un moyen de diviser le code pour chaque route individuellement. Lorsque vos besoins en matière de collecte de données se complexifient, vous risquez de rencontrer des cascades de réseaux serveur-client qui rendront votre appli très lente. Comme votre public comprend plus d’utilisateurs avec de mauvaises conditions de réseau et des appareils bas de gamme, vous pourriez avoir besoin de générer du HTML à partir de vos composants pour afficher le contenu tôt - soit sur le serveur, soit pendant le temps de construction. Modifier votre configuration pour exécuter une partie de votre code sur le serveur ou pendant la construction 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, vous devrez intégrer votre bundler à votre gestionnaire de routes et à votre bibliothèque de récupération de données. Il n’est pas difficile d’obtenir une configuration initiale qui fonctionne, mais il y a beaucoup de subtilités impliquées dans la création d’une appli qui se charge rapidement même si elle grandit au fil du temps. Vous voudrez envoyer le minimum de code de l’appli, 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 toujours avec JavaScript désactivé. La mise en place de ces fonctionnalités demande un réel 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 les compétences entre différents projets. Inversement, avec une configuration personnalisée, il est plus facile de rester bloqué sur des versions de dépendances non prises en charge, et vous finirez essentiellement par créer votre propre framework - bien qu’il n’y ait pas de communauté ou de chemin de mise à niveau (et s’il ressemble à ceux que nous avons faits dans le passé, il est conçu de manière plus aléatoire).

Si vous n’êtes toujours pas convaincu, ou si votre appli a des contraintes inhabituelles qui ne sont pas bien servies par ces frameworks et que vous souhaitez mettre en place votre propre configuration personnalisée, nous ne pouvons pas vous arrêter - allez-y ! Prenez react et react-dom sur npm, mettez en place votre processus de construction personnalisé avec un bundler comme Vite ou Parcel, et ajoutez d’autres outils lorsque vous en avez besoin pour la gestion des routes, l’exportation statique ou le rendu côté serveur, et plus encore.

Le routeur d’appli de Next.js implémente entièrement de manière officielle la spécification des composants serveurs React. Cela vous permet de mélanger des composants de type période d’exécution, serveur et interactifs dans une seule et même arborescence React.

Par example, vous pouvez écrire un composant serveur React comme une fonction async qui lit à partir d’une base de donnée ou d’un fichier. Vous pouvez transmettre des données aux composants interactifs :

// Ce composant s’exécute *seulement* sur le serveur (ou pendant la création).
async function Talks({ confId }) {
  // 1. Vous êtes sur le serveur, vous pouvez communiquer avec votre couche de donné. L’API n'est pas necessaire.
  const talks = await db.Talks.findAll({ confId });

  // 2. Ajoute toute charge de logique de rendu. Il n’augmentera pas la taille de votre bundle JavaScript.
  const videos = talks.map(talk => talk.video);

  // 3. Transmettre la donnée aux composants qui s'executera dans le navigateur.
  return <SearchableVideoList videos={videos} />;
}

L’appli routeur de Next.js intègre également la collecte de données avec Suspense. Ceci vous permet de spécifier un chargement d’état local (comme un squelette de chargement) 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ésion et un travail d’implémentation non trivial. Pour l’instant, l’appli routeur de Next.js est l’implémentation la plus complète. L’équipe React travaille avec les développeurs de bundlers pour faciliter l’implémentation de ces fonctionnalités dans la prochaine génération de frameworks.