La Tartine #4

Le SECRET des sites ultra rapides ou comment on crée des sites qui se chargent en moins d'une seconde

BENOIT EL AMRANI

Hello,

Ce n’est pas toujours évident d’expliquer à nos clients les concepts clés de la Jamstack.

Par exemple, comment expliquer les méthodes de rendering ?

Car même si certains connaissent vaguement le principe de communication entre le client et le serveur, peu savent expliquer la différence entre un rendu statique et dynamique.

C’est donc ce que je vous propose d’explorer aujourd’hui !

Sans plus tarder, entrons dans le vif du sujet !

🔍 Dans cette édition…

  • Comment prendre le train en marche de l’approche composable 🚂

  • Comment optimiser la vitesse de son e-commerce (et augmenter ses conversions 🤑)

  • Une alternative RGPD friendly à Google Analytics, sans script côté client 🤯

Mais avant toute chose…

🐣 Le tweet de la semaine

Bon, désolé pour la capture d’écran de 12 étages 😬

Mais ce tweet résume une tendance sur mon fil d’actualité Twitter, ou chacun essaye de créer des sites web complets avec l’aide de l’IA.

Ce que je remarque surtout avec l’IA, c’est la montée en puissance de l’utilisation des API raccorder du contenu qui vient de diverses sources à un frontend… Ça ne vous rappelle rien ? 😉

Vous l’avez deviné, on est totalement dans une philosophie composable, ou le contenu n’est plus uniquement celui généré par vos soins via un CMS.

Il va donc devenir de plus en plus indispensable d’avoir une source unique de vérité pour rassembler tous les contenus d’une entreprise, et surtout la flexibilité de l’afficher comme on le souhaite côté frontend.

Je prédis donc un futur radieux pour les CMS headless et l’architecture composable 🤩

🤔 La question de la communauté

Aujourd’hui, on continue notre série ou l’on reprend les bases de la Jamstack, et on va aborder l’un des principes fondateurs de la philosophie Jamstack :

Comment fonctionne le processus de génération statique dans la Jamstack, et quels sont ses avantages par rapport aux sites web dynamiques ?

Le processus de génération statique, c'est comme préparer des gâteaux à l'avance pour les donner aux invités lorsqu'ils arrivent, au lieu de les faire cuire à la demande.

Cela consiste à préparer les pages d'un site web à l'avance, pour qu'elles soient prêtes à être servies rapidement aux visiteurs.

Cela offre des avantages en termes de vitesse, de sécurité et de facilité de gestion par rapport aux sites web dynamiques, qui génèrent les pages à la demande de l'utilisateur.

La génération statique implique la création préalable de pages HTML, CSS et JavaScript lors de la phase de construction du site.

Ces fichiers statiques sont ensuite déployés sur un CDN (Content Delivery Network) pour être servis rapidement aux utilisateurs finaux.

Cette approche diffère des sites web dynamiques qui génèrent du contenu à la volée à l'aide de serveurs d'application et de bases de données.

Les avantages de la génération statique sont multiples :

  • Performance : Les fichiers statiques sont servis plus rapidement que le contenu généré dynamiquement, ce qui se traduit par des temps de chargement réduits pour les utilisateurs.

  • Sécurité : Les sites statiques n'utilisent pas de bases de données ou de serveurs d'application, ce qui réduit les points d'entrée pour les attaques et les vulnérabilités.

  • Sécurité : Les sites statiques peuvent être hébergés sur un CDN plutôt qu'un serveur, ce qui réduit les points d'entrée pour les attaques et les vulnérabilités.

  • Fiabilité : Les sites statiques sont moins sujets aux pannes, car ils ne dépendent pas forcément d'un serveur ou de bases de données pour générer le contenu.

  • Coûts réduits : Les coûts d'hébergement et de maintenance sont souvent moins élevés pour les sites statiques, car ils nécessitent moins de ressources serveur.

  • Écologie : Les fichiers statiques peuvent être mis en cache ce qui nécessite moins de requêtes de la part des utilisateurs, et donc des dépenses énergétiques moindres.

J’espère que cette brève explication vous permet d’y voir plus clair sur la génération statique, et que vous comprenez mieux la différence avec le fonctionnement classique de génération dynamique.

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

🥪 JamSnacks

  • On commence par des conseils d’expert pour préparer son entreprise à “l’Ère du Composable”, dans laquelle Le contenu ne se limite plus aux textes et aux images d'une page web, mais englobe désormais divers aspects de l'entreprise, comme les métadonnées et les feedback des clients, qui peuvent être utilisés à part entière dans une stratégie de contenu.

  • Netlify nous explique comment tirer partie de l’architecture Edge pour optimiser un e-commerce et personnaliser le contenu en fonction de l’utilisateur, tout en gardant la vitesse fulgurante d’une page statique ⚡

  • On continue avec Netlify, qui nous propose cette fois un chouette article sur les acronymes du rendering, et leur signification. SSR, SSG, ISR, CSR, ESR n’auront plus aucun secret pour vous, et vous pourrez briller en soirée mondaine 😎

  • Vercel annonce l’ouverture de sa solution d’analytics pour tous les utilisateurs, payants et gratuits 🤯 C’est une excellente nouvelle pour tous les utilisateurs qui souhaitent intégrer une alternative à Google Analytics plus performante et qui respecte le RGPD.

  • Le CMS Forestry ferme se portes 😢 Mais ce n’est que le début d’une nouvelle aventure, puisque les utilisateurs peuvent migrer sur leur nouvelle solution : TinaCMS ! Chez Pickbeam, on l’a testé, et on peut vous assurer que c’est très cool à utiliser 🙂

  • Enfin on termine avec un tutoriel complet pour créer une web app de réservations d’hôtel avec Next.js et Strapi, un classique !

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 !