Gatsby ou Next quel framework choisir en 2020 ?

Les framework javascript ne manquent, cela en donnerait presque le vertige. Mais comparons ensemble deux framework qui ont sur faire leur place dans cette jungle épaisse. Gatsby (2015) et NextJS (2016)

Jusqu'à il y a quelques mois, le choix entre NextJS et Gatsby était facile. Besoin de faire un site statique, comme pour un blog ou une page d'aide dont le contenu ne change pas trop souvent ? Cool, choisissez Gatsby. Vous avez besoin de créer un site avec un rendu côté serveur, comme une boutique en ligne avec ses milliers d'articles, son compte client ? Super, vous pouvez compter sur NextJS.

Avec la sortie de NextJS 9.3, les frontières se sont estompées. NextJS prend désormais en charge la génération de sites statiques de nouvelle génération. En utilisant les nouvelles méthodes de construction getStaticProps et getStaticPaths, les utilisateurs peuvent créer des sites statiques, tout comme Gatsby.

La question est donc la suivante : si NextJS peut faire tout ce que Gatsby peut faire, mais que Gatsby ne peut pas faire tout ce que NextJS peut faire, pourquoi choisir Gatsby ?

Jetons un coup d'œil sur les forces et les faiblesses de Gatsby et de NextJS, et enfin, faisons quelques recommandations sur ce que vous devriez utiliser pour votre prochain projet.

Pourquoi choisir le framework Gatsby ?

Gatsby est un framework pour la création de sites statiques performants basé sur React et GraphQL. En compilant vos applications React en HTML statique, il crée des pages web qui obtiennent les meilleures notes sur les analyseurs de vitesse de sites web comme le Lighthouse de Google.

Gatsby dispose d'un énorme écosystème de thèmes, de plugins et de projets de démarrage.

Les plugins Gatsby

Les plugins Gatsby sont des paquets de nœuds qui mettent en œuvre les API Gatsby. Vous téléchargez les plugins Gatsby depuis NPM et les incluez dans votre fichier gatsby.config.js.

L'un de mes plugins Gatsby préférés s'appelle gatsby-image. Gatsby image redimensionne vos images au moment de la construction, créant des images plus petites pour que les petits appareils ne téléchargent pas des images de la taille d'un bureau. Il optimise vos images, les rendant plus petites et plus rapides à charger. Et il charge paresseusement les images pour accélérer encore plus votre site web. Enfin, il applique une technique appelée "floutage" de vos images pour une expérience utilisateur sans faille.

Une version 2 est actuellement en phase de beta, encore plus performante.

Nous n'avons pas le temps dans cet article de passer en revue tous les plugins Gatsby populaires, mais croyez-moi, il y en a des tonnes. Il existe un plugin pour tout, de l'ajout de polices Google à l'analyse de votre pack Webpack, en passant par la gestion de votre site web hors ligne.

Les thèmes Gatsby

Les thèmes sont l'un des principaux arguments de vente de Gatsby. Ils vous permettent de partager des fonctionnalités, des sources de données et même la conception de plusieurs projets. Vous pouvez télécharger et mettre à jour les thèmes Gatsby sous forme de paquets NPM.

Les plugins et thèmes Gatsby nous permettent d'abstraire la configuration, le fetching de données, voire les styles et l'interface utilisateur. Cela fait de Gatsby un excellent choix pour les petits projets comme les portfolios et les blogs personnels.

Cependant, Gatsby a des problèmes de scalabilité ce n'est pas un choix aussi judicieux pour les applications plus grandes et plus complexes, on parle de très grosses applications web, à plusieurs dizaines de milliers de pages. Si les temps de sont une problématique Gatsby propose une solution cloud pour des builds plus rapides

Pourquoi choisir le framework NextJS ?

Next.js est un framework React.js utilisé à dans différentes situations. Alors qu'il était initialement conçu pour rendre l'application côté serveur, Next.js 9.3 vous permet maintenant de générer des pages statiques et d'utiliser AMP dans votre application.

Next.js est très similaire au React.js que nous connaissons. Vous configurez un projet Next différemment, bien sûr, mais à la fin vous écrivez le code de React. Next fait le reste pour nous.

En raison de cette simplicité et des fonctions formidables qui peuvent rendre n'importe quel projet React juste un peu meilleur, je pense qu'il n'y a aucune excuse pour ignorer Next.js.

Regardons comme une page est implémentée

// pages/posts/[id].js
import fetch from 'node-fetch'

function Post({ post }) {
  // Render post...
}

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map(post => ({
    params: {id: post.id}
  }))

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false }
}

// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return { props: { post } }
}

export default Post

Nous avons défini ici un itinéraire dynamique appelé pages/posts/[id].js.

Afin de le construire statiquement, nous devons donner à NextJS deux choses :

  1. Une liste des ids que nous devons prendre en charge. Pour cela, nous utilisons getStaticPaths.
  2. Les données pour chacune de ces pages (générées à partir de nos ids). Pour cela, nous utilisons getStaticProps.

En utilisant ces informations, NextJS construira pour nous une page pour chacun des identifiants des billets de notre blog, et il transmettra les données que nous avons récupérées de notre service externe à notre composant.

Contrairement à Gatsby, NextJS ne nous oblige pas à utiliser GraphQL ou REST. Il reste agnostique et vous laisse le choix. Il vous permet d'utiliser des pages rendues statiquement et des pages rendues par le serveur.

Quels sont les inconvénients de NextJS ?

Cependant, NextJS n'est pas agnostique partout. Sa navigation basée sur des fichiers fonctionne mieux pour le rendu statique et côté serveur. Elle ne permet pas d'avoir des itinéraires dynamiques pour les données rendues par le client. Pour ceux d'entre nous qui sont habitués à React Router, cela ressemble à une grande régression.

Supposons que vous vouliez utiliser le rendu côté client pour un itinéraire comme /products/yellow-dress-1. Avec NextJS, ce n'est pas possible. Il vous faudrait plutôt utiliser des paramètres de requête comme ceci /product?productId=adresse-jaune-1.

Conclusion, quel framework choisir ?

NextJS est un outil extrêmement puissant pour créer des applications React.

J'aime l'idée de combiner le meilleur de la génération de sites statiques et du rendu côté serveur. Pour un site de commerce électronique, vous pourriez rendre statiquement des pages qui ne changent pas très souvent. Comme votre page de contact, les informations sur l'expédition ou les blogs. Vous pourriez rendre sur le serveur des pages qui changent, comme vos pages de produits.

NextJS est un excellent choix pour les petites et grandes applications web, pour les projets commerciaux et pour les portfolios personnels. La seule mise en garde à laquelle je pense est la rigidité du routage de NextJS (et de l'impact SEO que cela peut avoir ?). Assurez-vous simplement que vous êtes ok avec les limites de son routage avant de commencer votre nouveau projet NextJS.

Maintenant que NextJS supporte le rendu de sites statiques de nouvelle génération, je recommande de l'utiliser à la place de Gatsby. Je crois que (presque) tout ce que vous pouvez faire avec Gatsby, vous pouvez le faire avec NextJS. Et comme NextJS est davantage utilisé dans l'industrie, l'utilisation de NextJS dans votre prochain projet personnel peut vous aider lorsque vous cherchez un emploi.

La seule chose qui me manque dans mon travail avec Gatsby est le plugin gatsby-image. Une fois que quelqu'un de la communauté NextJS aura écrit une alternative appropriée à gatsby-image, je serai capable d'oublier complètement Gatsby.

Created by potrace 1.16, written by Peter Selinger 2001-2019