Le Static Site Generation (SSG), ou génération de site statique, est un procédé de rendu qui existe depuis les débuts du Web. Ce principe a été remis au goût du jour avec les évolutions des frameworks Javascript et offre une alternative aux modes de rendu présentés dans les précédents articles : Client Side Rendering (CSR) et Server Side Rendering (SSR)

Retour vers le futur : Pourquoi mettre en place une génération de site statique ?

Le mode SSG (Static Site Generation) est un concept historique du Web, mais son utilisation novatrice en Javascript, introduite entre 2016 et 2019, s'est développée grâce aux évolutions des frameworks tels que Nuxt.js, Next.js ou encore Gatsby.

Comme expliqué dans notre article précédent, le Server Side Rendering (SSR) résout certaines limites du Client Side Rendering (CSR) mais nécessite l'ajout d'un serveur supplémentaire Node.js (qui fait tourner Nuxt, Next ou équivalent). Si l'on met de côté les possibilités de mise en place d'une mécanique de cache, le mode Server Side Rendering (SSR) implique la génération d'une page côté serveur lors de chaque nouvelle visite sur le site. Selon le trafic du site, la sollicitation du serveur n'est pas négligeable et le serveur se retrouve à devoir répéter plusieurs fois la même tâche 🤯 avec exactement les mêmes paramètres (même entrants, même résultats)...

Le mode SSG (Static Site Generation) répond à cette problématique et permet de générer la page / le site uniquement lors du build du site sur le serveur. Les pages sont générées une seule fois, stockées puis envoyées directement au client lors de la requête du navigateur.

Le principe du build d'un site web fait référence au processus de transformation des fichiers source et des ressources du projet en un ensemble de fichiers prêts à être déployés sur un serveur web. Son but est d'optimiser les performances, de regrouper et de préparer les fichiers pour une utilisation en production, et de minimiser la taille des ressources pour améliorer le temps de chargement du site. Le build est généralement effectué avant de mettre le site en ligne.

Ainsi, le temps de chargement de la page est considérablement diminué, car le navigateur télécharge uniquement des fichiers qui existent déjà (quelques Ko) et qui donc n'ont pas besoin d'être générés à la volée.

💡Attention, l'utilisation d'un rendu de type SSG ne veut pas dire, contraire à son nom, que le site est statique/figé ! Le site peut tout à fait contenir du Javascript pour dynamiser les rendus et les contenus peuvent être mise à jour (même si l'on perd un peu d'instantanéité de ce côté comme nous le verrons).

Comment fonctionne le Static Site Generation (SSG) ?

Lors du processus de génération (ou build) du site, les pages sont pré-rendues et générées en utilisant les données fournies. Ces pages sont ensuite stockées sous forme de fichiers statiques. Lorsqu'un utilisateur visite le site, la navigateur va directement récupérer les fichiers générés.

Le processus du SSG (source)

Dans le mode SSG l'on distingue donc deux phases et deux infrastructures :

1/ L'infrastructure de build qui nécessite l'utilisation d'un framework tel que Nuxt, Next ou Gatsby (et le serveur node.js associé)

2/ L'infrastructure d'hébergement du site qui est beaucoup plus légère que pour un site utilisant un mode de rendu différent. Des solutions spécialisées (comme Netlify) permettent d'héberger ce type de site. L'infrastructure étant beaucoup plus réduite et plus "simple" les coûts d'hébergement sont largement réduits.

Quels sont les avantages du Static Site Generation (SSG) ?

Le rendu d'un site avec une génération statique présente plusieurs avantages :

1/ L'amélioration des performances

Les sites statiques chargent rapidement car les pages sont déjà générées. Pas de requêtes supplémentaires nécessaires par exemple pour récupérer des données dans un CMS.

2/ Une sécurité renforcée

Le site ne nécessite pas d'exécution de code côté serveur ou côté client, ce qui réduit considérablement les risques d'attaques malveillantes et l'exposition de données sensibles, comme des clés API.

3/ La réduction des besoins d'infrastructure

Le Static Site Generation (SSG) permet d'utiliser de réduire les besoins (et les coûts d'infrastructure). Le site en production est hébergé via une solution spécialisée qui met en cache les pages statiques, réduisant ainsi les exigences d'hébergement et offrant une meilleure gestion des pics de trafic.

Quels sont les limites du Static Site Generation (SSG) ?

1/ Une interactivité réduite

La page chargée par le navigateur étant statique, elle offre moins d'interactivité avec l'utilisateur. L'interactivité est encore possible, mais demeure plus difficile à mettre en oeuvre. Le Static Site Generation (SSG) est moins adapté par exemple pour un tunnel de commande.

2/ Un contenu pas toujours à jour

La mise à jour des contenus se fait de manière asynchrone, en régénérant la totalité du site (donc un nouveau build) pour récupérer les contenus à jour depuis une API via un CMS par exemple.

3/ Le temps de build lors des mises à jour

La génération d'une nouvelle version du site (nouveau build du site) peut prendre un certain temps pouvant générer une brève indisponibilité du site pour les visiteurs si aucun contre mesure n'est mise en place.

Le Static Site Generation (SSG) est une approche efficace et performante pour la création de sites web. Il offre des avantages significatifs en termes de performances, de sécurité et de facilité de déploiement. Cependant, il n'est pas exempt d'inconvénients, notamment en terme de mise à jour et disponibilité de la donnée.

Pour pallier ces problèmes, l'approche innovante a récemment vu le jour et sera l'objet de notre 4ème épisode de la série : l'Incremental Static Regeneration (ISR).