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. 



Hello.
Mon nom est Vincent Ballut, je suis développeur web freelance basé à Paris. J'ai aussi un site pro, un github, et je tweet de temps en temps. Si vous souhaitez me contacter, je réponds plus facilement sur linkedin ou par email.

Ajouter un commentaire

Laisser un commentaire

Hello.
Je m'appelle Vincent Ballut,
développeur web
freelance.

Je publie des articles accessibles et pédagogiques sur tout ce qui touche au développement web et à ses problématiques.

Dans la vraie vie, je suis développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc).

J'ai aussi un site pro, un github, et je tweet de temps en temps. Si vous souhaitez me contacter, je réponds plus facilement sur linkedin ou par email.

Derniers articles