web-dev-qa-db-fra.com

Quand utiliser un framework de réaction tel que Next ou Gatsby vs Create React App

Je suis dans la phase de prototypage rapide de mon expérience d’apprentissage React/javascript. Je me demandais quand les gens se tourneraient vers un framework tel que Next.js ou Gatsby.js vs l’application standard Create React.

Je creuse vraiment la structure et la perspective basées sur la page pour les liens de préchargement de Next.js. Cependant, je ne sais pas quand vous atteindrez Next comme étant rattaché à l'ARC ou même renvoyé à l'ARC.

Merci!

37
Vince Picone

Je suis dans le même bateau. J'ai commencé avec CRA pour créer un SPA, ce qui était génial pour commencer et surmonter la courbe d'apprentissage. Mais j'ai vite réalisé deux problèmes importants:

  1. Partage sur les réseaux sociaux: je n'ai pas pu modifier les tags OGP par route. Cela a pour effet que seule votre route de base (configurée correctement avec les balises OGP) lorsqu'elle est partagée sur un réseau social peut produire la carte (terme Twitter). Toute autre route que vous partagez sera affichée comme vierge. Cela est vrai aussi pour Facebook et LinkedIn. Voir ici .
  2. Optimisation des moteurs de recherche: Bien que peu d’articles sur les moteurs de recherche puissent analyser votre SPA correctement pour l’indexation, cela n’a pas été satisfaisant. Par exemple Dans Google, j'ai remarqué que seule la page d'accueil est indexée et qu'elle n'est pas analysée correctement. Les titres séparés des éléments séparés sont concaténés. Bing, ne semble pas l'avoir indexé. Peut-être que Google l'a indexé car j'ai indexé la page d'accueil à l'aide de la console de recherche de Google. Ce n'est pas une solution envisageable si je dois réindexer manuellement chaque nouvelle page ou après une mise à jour d'une page.

Create-React-App: Un très bon outil d'amorçage pour commencer à créer un SPA.

Gatsby/React-Static: similaire à Create-React-App, mais produit une sortie de construction HTML à la place, donc "pré-rendu". Je suis encore à expérimenter avec cela. J'espère que cela résoudra les problèmes (1) et (2) car je peux maintenant avoir différentes balises OGP déjà dans le code HTML en cours de diffusion à partir d'un serveur de site statique (pages S3/Azure Blobs/Github) au lieu d'être modifiées localement aller chercher. Je ne suis pas sûr si cela fonctionnera encore. L'avantage supplémentaire est que, étant donné que Gatsby effectue déjà une pré-restitution pendant la phase de construction, les performances de l'utilisateur sont meilleures. (Peut-être une personne expérimentée avec Gatsby peut clarifier, ou je modifierai cette réponse après avoir terminé.) Mise à jour (2/19/2018): Je peux confirmer que (1) est résolu par Gatsby.js tout en étant hébergé en tant que statique. site Internet.

Next.js: Si Gatsby ne résout pas (1) et (2), Next.js sera ma solution de rechange pour créer une application SSR complète. Le problème ici est que je vais maintenant devoir utiliser PaaS pour héberger le site (par exemple Azure Web Apps ou AWS ElasticBeanStalk ou Heroku) au lieu d’un service d’hébergement de site statique (Azure Blob, AWS S3, Github Pages). Ce sera un peu plus coûteux et un peu plus de travail pour configurer les pipelines CI/CD.

Voir également ces alternatives répertoriées dans la documentation de l'ARC.

15
dparkar

J'ai récemment fait moi-même beaucoup de recherches sur ce sujet, en particulier créer-réagir-application contre Gatsby.js et j'ai découvert que les deux outils vous permettaient d'écrire du code tout de suite, sans trop vous soucier de la configuration. Cependant, Gatsby, par exemple, offre en plus un rendu au niveau du serveur au moment de la construction, ce qui est crucial pour le référencement. Vous n'avez besoin d'aucun serveur pour restituer vos vues, ce qui est le cas pour Next.js car elles sont déjà effectuées au moment de la construction. Lorsqu'un utilisateur visite votre site Web, la version HTML est chargée en premier et une fois le code javascript chargé, votre site Web devient une application Web de réaction entièrement fonctionnelle.

La bonne chose est qu'ils partagent tous la même couche de vue afin que vous puissiez passer d'un outil à un autre. vous pouvez vérifier passer de create-react-app à Gatsby.js qui entre dans les détails.

6
Khaled Garbaya

create-react-app est ce qu'il y a de mieux pour la création de sites Web et d'applications mobiles (applications natives réactives) car de nombreuses courbes d'apprentissage sont disponibles. les deux autres sont les cadres de réaction (on peut dire).

utiliser Gatsby pour un site Web à page unique plus rapide et facile à déployer . utiliser Next.js en travaillant avec REST - API (je suppose ...)

c'est à vous. un bon développeur trouve toujours son chemin pour un travail facile et rapide. 

0
user10743059

Je fais cette recherche moi-même. D'après ce que je comprends, Next.js fournit un rendu prêt à l'emploi côté serveur. Create React App ne le fait pas. Vous devez donc fournir votre propre solution de SSR (pour des opérations telles que le chargement plus rapide de pages et le référencement).

0
typeoneerror