Hello,

J’espère que vous avez passé un bon weekend de Pâques et bien mangé du chocolat ? 😋

Cette semaine, on a vu pas mal de mouvement dans l’écosystème Jamstack,

Si le contenu vous apporte de la valeur, n’hésitez pas à le partager autour de vous.

C’est la meilleure manière de nous soutenir.

Sans plus tarder, entrons dans le vif du sujet !

Dans cette édition…

Aujourd’hui, on vous propose un mini cours pour comprendre la Jamstack.

Sinon, pas mal d’infos sur Next.js, il faut dire que leur actu est bien chargée en ce moment !

Et puis, vous découvrirez entre autres :

• Une base de données qui s’installe sur le Edge 🤯

• Comment la maison mère de Burger King gère son contenu 🍔

• Comment optimiser les perfs de son site avec Strapi ⚡

Mais avant toute chose…

Le tweet de la semaine

Guillermo Rauch, CEO de Vercel qui annonce l’arrivée imminente d’une nouvelle version de Turbopack (le nouveau bundler ultra performant de Vercel) et du Streaming via les React Server Components (RSC).

C’est intéressant de voir que Rauch met en avant l’amélioration de la DX, car les RSC soulevaient pas mal de craintes sur la simplicité du code justement.

Mais comme on l’a vu avec les dernières versions de Next 13, les équipes semblent très attentives aux retours des développeurs. En tout cas, avec un tel teasing, on a forcément hâte de voir ça !

La question de la communauté

Chez Pickbeam, on est amoureux de la Jamstack, parce qu’on voit tous les avantages qu’elle peut apporter à un site web.

Pourtant, ce n’est pas toujours évident de transmettre notre passion à nos clients, qui n’ont pas forcément un profil technique.

Aujourd’hui, je vous propose donc de reprendre les bases :

Qu'est-ce que la Jamstack, et en quoi est-elle différente des architectures traditionnelles de développement web ?

La Jamstack est une architecture de développement web moderne.

Contrairement aux architectures traditionnelles, qui nécessitent des serveurs pour générer des pages à chaque demande d'un utilisateur, la Jamstack génère des pages HTML à l'avance et les stocke sur un réseau de distribution de contenu.

Cela signifie que les utilisateurs obtiennent des pages pré-construites et prêtes à être affichées, plutôt que d'attendre que le serveur construise une nouvelle page chaque fois qu'ils cliquent sur un lien.

Pour approfondir, la Jamstack repose sur quatre éléments clés : les générateurs de site statique, les API et services tiers, les CMS Headless, ainsi que les outils de déploiement de sites.

Les générateurs de site statique tels que Next.js, Gatsby ou encore Nuxt prennent du contenu dynamique (comme des articles de blog) et le transforment en pages HTML pré-construites.

Les API et les services-tiers permettent aux développeurs d'intégrer des fonctionnalités tierces telles que les systèmes de paiement ou les outils d'analyse de données, typiquement des solutions comme Stripe, Algolia ou Cloudinary.

Les CMS Headless, quant à eux, permettent aux développeurs de gérer le contenu du site web de manière séparée de la présentation. Les CMS Headless ne fournissent pas de fonctionnalités frontales, mais ils fournissent une API qui permet aux développeurs de récupérer et de gérer le contenu du site. En utilisant cette API, les générateurs de site statique peuvent construire des pages HTML à partir du contenu stocké dans le CMS.

Enfin, les outils de déploiement de sites comme Netlify ou Vercel simplifient la génération, le déploiement et la gestion de sites web Jamstack. Ainsi, votre site peut être mis à jour régulièrement, et il est possible de revenir en quelques clicks à une version antérieure en cas de souci.

Pour aller plus loin, la Jamstack offre plusieurs avantages techniques, tels qu'une meilleure sécurité, une vitesse de chargement plus rapide et une capacité de mise à l'échelle plus facile.

En utilisant des pages HTML pré-construites et des services tiers, les sites web Jamstack peuvent réduire les vulnérabilités de sécurité associées aux sites web dynamiques.

De plus, la pré-construction des pages permet aux utilisateurs d'obtenir des pages plus rapidement, tandis que les services-tiers permettent aux développeurs d'ajouter des fonctionnalités plus rapidement et plus facilement.

Enfin, grâce à la capacité de mise à l'échelle facile, les sites web Jamstack peuvent facilement gérer les pics de trafic et les augmentations de demande.

J’espère que cette petite explication vous permet d’y voir un peu plus clair 🙂

👉 Vous aimeriez poser une question sur la Jamstack ? Répondez à ce mail et nous y répondrons dans une prochaine édition !

Quelques snacks pour la route…

• ChiselStrike annonce le passage en beta ouverte de Turso, une base de données ultra légère qui peut tourner sur le réseau Edge. Concrètement, cela signifie que vos données pourront être stockées au plus près de vos utilisateurs, et ce même s’ils sont répartis sur plusieurs continents, pratique pour les sites multi langues !

• Next.js passe en version 13.3 et apporte son lot de nouveautés : ajout de métadonnées via des fichiers (tout comme error.ts ou loading.ts, on a désormais sitemap.ts, robots.ts, etc…) ce qui simplifie la gestion du SEO, génération d’images OpenGraph dynamique, et plein d’autres nouveautés qui font envie 🙂

• Décidément le monde des frameworks Javascript est en pleine ébulition, puisqu’après Next, c’est Astro qui annonce son passage en version 2.2. Au programme, la possibilité d’héberger ses assets sur un CDN externe et une amélioration de l’API image. Une petite mise à jour donc, mais qui fait toujours plaisir.

• Strapi nous propose un tutoriel pour optimiser les performances des sites basés sur son CMS. L’article couvre l’optimisation du frontend, mais aussi du CMS en lui même. On a tendance à moins s’y intéresser, pourtant l’UX du backend est très importante puisque c’est un outil qui peut être utilisé au quotidien.

• Cet article nous offre une étude de cas passionnante qui explique comment RBI (la société qui détient Burger King notamment) utilise Sanity pour délivrer du contenu à ses 20 millions d’utilisateurs. L’article illustre parfaitement les intérêts d’un CMS headless pour ce genre d’entreprise.

• On a beaucoup parlé de Sanity et de Next.js aujourd’hui, et je vais en remettre une couche avec ce tutoriel vidéo qui vous explique comment mettre en place un petit site personnel avec Next.js + Sanity. Le tuto dure 2 heures, et couvre tous les essentiels pour que vous puissiez être autonomes sur ces technos 👌

Et voilà, c’est déjà tout pour cette semaine !

J’espère de tout cœur que cette édition vous à plu, si c’est le cas :

👉 Pensez à la partager à vos amis 💌

👉 Si vous avez des idées pour améliorer la newsletter, répondez simplement à ce mail. Nous lisons toutes vos réponses !