Il m’a fallu du temps pour comprendre de quoi il s’agissait, et pourquoi le concept devenait de plus en plus populaire. Les sites dits statiques (aussi appelĂ©s headless, ou serverless) ont connu une vĂ©ritable explosion en 2018.
De quoi s’agit-il ?
A la différence des sites dynamiques où le contenu est généré à la volée à chaque visite, les sites statiques sont de simples de fichiers HTML/CSS/JS générés une seule fois et rendu tels quels aux utilisateurs.
Les sites statiques éliminent les requêtes en base de données et les traitements côté serveur.
Pourquoi passer en statique ?
Cette approche a deux très gros avantages :
- RapiditĂ© : Les traitements cĂ´tĂ© serveur reprĂ©sentent une partie importante du temps de chargement des pages. L’approche statique, qui s’abstrait de ces traitements, amĂ©liore de facto la vitesse d’un site.
- Sécurité : Aucune base de donnée à pirater, aucun code exécuté côté serveur : les sites statiques sont par nature peu vulnérables.
Mais aussi deux inconvénients majeurs :
- Mise à jour : A chaque modification de contenu, il vous faudra régénérer les fichiers statiques. Si les modifications sont fréquentes, le process peut vite devenir lourd.
- Pas de contenu utilisateur : La base de donnĂ©es ne pouvant ĂŞtre sollicitĂ©e, il est impossible d’hĂ©berger un système de commentaires, un formulaire de contact, un forum, un site ecommerce, ou tout autre système nĂ©cessitant de stocker des informations. Cette limitation peut ĂŞtre contournĂ©e en externalisant ces modules Ă des services tiers, par exemple intĂ©grer un formulaire Google Docs en guise de formulaire de contact.
Cas pratique : Serverless WordPress
Sur un site WordPress classique, le contenu Ă afficher est rĂ©cupĂ©rĂ© Ă chaque visite dans une base de donnĂ©es, puis injectĂ© dans des templates PHP, avant d’ĂŞtre retournĂ© Ă l’utilisateur.
Avec l’approche statique, des fichiers HTML sont gĂ©nĂ©rĂ©s en amont pour tous les articles et toutes les pages du site. Lorsque un utilisateur visite le site, ce sont ces fichiers qui sont retournĂ©s. Il n’y a aucune requĂŞte en base de donnĂ©es, et aucun traitement PHP.
Les outils
En quelques mois, Gatsby s’est imposĂ© comme l’outil de rĂ©fĂ©rence pour dĂ©velopper un site statique. En bref, Gatsby permet de gĂ©nĂ©rer les fichiers d’un site statique Ă partir d’une application dĂ©veloppĂ©e en React et GraphQL.
Plus ancien, Jekyll est la solution parfaite pour mettre en ligne très rapidement un site avec peu de contenu. Vous fournissez le contenu, et Jekyll s’occupe d’assembler le site pour vous. Jekyll est notamment utilisĂ© pour les pages GitHub.
Initialement conçu pour faire du React Server-Side (exĂ©cuter le code React cĂ´tĂ© serveur), Next propose Ă©galement une option permettant de gĂ©nĂ©rer les fichiers statiques de l’application.Â
