
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.Â