Nous publions une nouvelle traduction pour les futurs développeurs React. Nous espérons que cet article vous aidera à choisir le bon outil pour votre prochain projet.
Quand il s'agit de créer de nouveaux projets dans React, nous avons un choix évident: NextJS ou Create-React-App. Gatsby est largement hors d'usage en raison de la lenteur des builds lors de la mise à l'échelle. De plus, NextJS devient un générateur de site statique de plus en plus pratique.
Photo par Artyom Sapegin sur Unsplash
Dans cet article, nous examinerons les avantages et les inconvénients de NextJS et Create-React-App, ainsi que les cas d'utilisation qui conviennent à chacun.
Create-React-App
Create-React-App est un ensemble d'outils qui vous permet de créer de nouvelles applications React. L'ARC stocke des dépendances telles que webpack et babel dans des scripts de réaction. Create-React-App facilite le travail avec les transpilers et les bundlers.
Cela signifie que la mise à jour de ces dépendances "cachées" n'est pas du tout difficile. Vous devez attendre la nouvelle version des scripts de réaction et la mise à jour. Nous n'avons pas à nous soucier de corriger les changements de configuration de Webpack.
Avantages de l'utilisation de Create-React-App
Sans opinion
N'importe quelle bibliothèque peut être utilisée, il n'y a pas de règles ou de directives. Le choix de la bibliothèque pour le routage est également à votre discrétion.
Create-React-Apps est rendu côté client
Puisque nous rendons Create-React-Apps côté client, le déploiement est facile. Nous pouvons héberger l'application sur n'importe quel hébergement de fichiers, par exemple sur S3. Les applications CSR sont beaucoup plus faciles à utiliser!
Inconvénients de Create-React-App
Difficile à personnaliser
Il n'y a aucun moyen intégré de personnaliser l'application. Si vous avez besoin d'ajuster la configuration de votre pack Web, votre seule option est d'utiliser un outil tiers comme craco ou eject. Cependant, après avoir exécuté la commande d'éjection, vous perdrez presque tous les avantages de l'utilisation de Create-React-App.
Il résume la complexité de
Create-React-App fonctionne très bien jusqu'à ce que vous deviez faire quelque chose qu'il ne prend pas en charge. Ça va être difficile! En masquant la configuration babel et webpack, Create-React-App facilite la mise en route. Cependant, cela empêche les développeurs d'en savoir plus sur le fonctionnement de ces outils vitaux.
Affecte négativement le référencement
Puisque nous rendons Create-React-Apps côté client, l'outil est difficile à mettre en œuvre SEO. Create-React-Apps ne doit pas être utilisé à des fins de commerce électronique ou de marketing.
SuivantJS
Il n'est pas tout à fait correct de comparer NextJS et Create-React-App, car NextJS est bien plus. Alors que CRA est un outil pour échafauder les applications React, NextJS est un cadre pour les créer. Prêt à l'emploi, NextJS fournit un rendu côté serveur, la création de sites statiques, des fonctionnalités sans serveur, etc. Il s'agit d'un ensemble d'outils qui nous donne tout ce dont nous avons besoin pour créer des applications Web efficaces.
Vous voulez aller encore plus loin avec NextJS? Essayez HappyKit .
HappyKit fournit aux applications NextJS des tâches répétitives (tâches CRON), des analyses très simples et des indicateurs de fonctionnalités. Vous pouvez vous inscrire à la version bêta ici !
Avantages de l'utilisation de NextJS
NextJS est ultra rapide!
Grâce au rendu côté serveur et à la génération de sites statiques, les applications NextJS s'exécutent beaucoup plus rapidement. Next prend en charge les optimisations de performances par défaut.
Déploiement facile
Vercel (la société derrière NextJS) facilite le déploiement d'applications React full-stack . Quelques clics de souris et vous disposez d'un pipeline de déploiement professionnel. Le processus comprend les pré-déploiements et les déploiements de production.
NextJS fournit le routage
NextJS fournit un moyen rapide et facile de créer des API dans les applications. Si votre application utilise des API tierces, vous avez souvent besoin de votre propre API pour les demandes de proxy et le stockage de jetons. Le routage NextJS est parfait pour cela.
Facile à personnaliser
NextJS vous permet de personnaliser vos configurations babel ou webpack. Ajouter des chargeurs Webpack ou des plugins Babel est facile!
Inconvénients de l'utilisation de NextJS
NextJS est un cadre d'opinion
Il n'y a qu'une seule façon de travailler avec les routes dans NextJS, et vous ne pouvez pas le personnaliser. NextJS est limité à sa route basée sur des fichiers et les routes dynamiques ne sont possibles que lors de l'utilisation d'un serveur NodeJS.
Quand devriez-vous utiliser NextJS?
Lors de la création d'une page de destination,
NextJS est idéal pour créer une page de destination et mettre en œuvre d'autres tâches marketing.
Quand le référencement est important
Lors de la création de sites de commerce électronique, l'optimisation des moteurs de recherche est plus importante que jamais. Grâce à son rendu côté serveur, NextJS se démarque également à cet égard.
Lors de la création de sites Web, le
rendu côté serveur de l'application élimine le besoin pour les clients de rendre sur leurs appareils. Pour les utilisateurs d'appareils plus lents, cela peut entraîner des temps de démarrage plus rapides.
Quand devriez-vous utiliser Create-React-App?
Lors de la création d'une application fermée
Si votre application n'est accessible qu'aux utilisateurs authentifiés, elle perd la plupart des avantages du rendu côté serveur. Dans ce cas, les applications CSR fonctionnent bien, elles sont plus faciles et moins chères à héberger.
Lors de la création d'applications Web,
les applications Web bénéficient généralement moins du rendu côté serveur. En règle générale, ces applications sont réutilisées par les utilisateurs et nous pouvons appliquer la mise en cache pour fournir un chargement ultra-rapide sans le coût et les tracas de SSR.
Nous espérons que cet article vous a aidé à décider si NextJS et Create-React-App conviennent à votre prochain projet. Ces deux outils sont très intéressants pour créer des applications React. Vous ne pourrez pas choisir un gagnant: pour certains cas, il est préférable d'utiliser NextJS, et pour d'autres - Create-React-App.