Sites statiques : pourquoi un tel engouement ?

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

Le plugin Simply Static permet de gĂ©nĂ©rer les fichiers statiques Ă  partir d’un site WordPress existant.

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

Gatsby : la référence (sorti en 2017)

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.

Jekyll : la simplicité (sorti en 2013)

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.

Next (sorti en 2016)

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. 

A propos de l'auteur

Le dev du coin

Je suis un développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc). Je fais également du développement personnalisé de thèmes et de plugins pour WordPress.

Ajouter un commentaire

Laisser un commentaire

Le dev du coin

Je suis un développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc). Je fais également du développement personnalisé de thèmes et de plugins pour WordPress.

Sur les réseaux

Derniers articles