Dans cet article nous allons expliquer la différence entre les sites dynamiques (les sites web tels qu'on les connaît depuis toujours) et les sites statiques (plus récents et en pleine expansion).
Que se passe-t-il quand je visite un site dynamique ?
Typiquement, une page web se compose d'un fichier HTML pour le balisage (en quelques sortes le "squelette" du site), d'un fichier de style (formes, couleurs, positionnement des éléments ...) et d'un fichier de script pour les interactions de l'utilisateur sur la page (fonctions à exécuter lorsqu'un utilisateur clique sur un bouton, par exemple). Ces fichiers sont reçus par votre navigateur web (Chrome, Safari, Firefox ...) et transformés en contenu visible et compréhensible par un humain : c'est l'interface utilisateur.
Lorsque vous visitez un site dynamique (que nous opposerons donc ici aux sites statiques), vous entrez dans votre navigateur une adresse URL, qui permet d'identifier les pages web. L'URL que vous avez saisie est transformée en adresse IP et vous connecte au serveur qui possède les fichiers du site demandé, et envoie ceux-ci à votre navigateur : fichier HTML, fichiers CSS (feuilles de style) et JavaScript (script). Cela prend un certain temps, qui dépend entre autres de votre connexion internet, de celle du serveur, de la mémoire disponible sur votre méteriel, etc.
Et les sites statiques ?
Nous en avons parlé, un site internet est composé de plusieurs fichiers qui, une fois assemblés par le navigateur, forment une page web lisible par un humain. Cependant, ce travail d'assemblage prend un certain temps, en particulier l'exécution du code JavaScript, de plus en plus abondant sur les sites internet. C'est pour ça qu'une page blanche s'affiche généralement losqu'on visite un site : il s'agit du temps nécessaire au navigateur pour faire son travail.
Avec un site statique, ce n'est pas le navigateur qui effectue ce travail, mais le serveur. Le serveur récupère en amont les différents fichiers du site et s'occupe de construire une page HTML "toute prête" à être affichée par le navigateur. Ce "produit fini", qu'on appelle le "bundle", contient tout le texte et les images du site, les éléments de style et les fonctions interactives. Lors de la visite d'un utilisateur, le navigateur n'a plus qu'à récupérer le bundle mis à disposition par le serveur et à l'afficher : une étape très rapide puisque tout est déjà prêt ! Vous pouvez vous-même constater qu'on ne voit aucune page blanche lorsqu'on navigue sur notre site : toute l'interface utilisateur a déjà été construite par le serveur, et le rendu dans le navigateur est instantané. C'est le premier avantage d'un site statique : sa rapidité.
Autres avantages
Outre leur rapidité, les sites statiques ferment aussi la porte aux tentatives de hack (pas de serveur = pas de piratage) et de surcharge (pas de serveur = pas de saturation de connexions). Le fait de ne pas avoir de serveur à paramétrer est aussi un gain de temps et d'argent (avec un site dynamique, un développeur devrait à la fois passer du temps à concevoir l'interface utilisateur et à la fois paramétrer le serveur qui met à disposition les fichiers).
Par nature, les sites statiques sont rapides et donc appréciés des moteurs de recherche (pour rappel, les sites qui mettent plus de 3 secondes à charger sont désormais black-listés par Google). De plus, les outils qui permettent de développer des sites statiques (Gatsby, Next, Jekyll ...) sont généralement très à cheval sur le référencement, la performance, les formats d'images et l'adaptation aux écrans mobiles. Autant d'éléments qui favorisent grandement le référencement naturel.
Le coup de maître
Au delà de la performance, la grande force des sites statiques est leur capacité à pouvoir récupérer leur contenu depuis diverses sources. En effet, il est possible de "brancher" à un site statique sur lequel on a déjà créé l'interface utilisateur, une source de contenu qui va injecter dans le site le contenu à afficher.
Prenons l'exemple d'un blog. Sur un blog, il y a des articles composés de texte et d'images. Avec les sources de contenu branchées aux sites statiques, vous pouvez rédiger tranquillement vos articles de blog, uploader vos photos, et tout ceci apparaîtra sur votre site en quelques secondes. Les sources de contenu sont en fait des CMS (Content Management System) qui vont récupérer le contenu que vous avez rédigé et l'afficher sur le site en respectant l'interface utilisateur créée par le développeur. En gros, vous pouvez mettre à jour vous même le contenu de votre site de façon autonome, sans avoir à écrire une seule ligne de code, et en quelques minutes seulement. Votre site statique affiche l'interface utilisateur, votre CMS injecte le contenu. Si vous souhaitez en savoir plus sur cette technique, contactez-nous.
Les limites
Comme les sites statiques se passent de serveur, tout ce qui nécessite la réponse d'un serveur est théoriquement impossible. Ainsi, l'upload d'un fichier par l'utilisateur par exemple, ou les achats en ligne (le contenu de la commande devant être récupéré par un serveur pour pouvoir être traité par le magasin).
Mais en fait, comme les sites statiques sont de plus en plus populaires et qu'ils se branchent facilement sur des sources de contenu externes, il y a aujourd'hui une solution performante pour quasiment chaque cas d'usage. Ainsi, pour un site de e-commerce, on branchera par exemple le site statique sur les serveurs de Shopify (leader des sites de vente en ligne) et les paiements seront gérés par Stripe ou un autre fournisseur de paiements en ligne. Pour l'upload de fichiers, on pourra utiliser l'API Google Firebase qui récupèrera les fichiers mis en ligne par les visiteurs de votre site.
En utilisant des outils légers et adaptés à chaque besoin, on crée des solutions sur-mesure pour chaque site statique, économisant du temps et de l'argent.
Conclusion
Vous l'aurez compris, les sites statiques ne signifient pas, comme leur nom pourrait le laisser croire, que leur contenu est figé. Ils ont de moins en moins de limites et s'imposent de plus en plus comme la solution web incontournable pour de nombreuses personnes et entreprises.
Chez Urule, nous avons fait le choix d'utiliser l'un des services de développement de sites statiques le plus performant à ce jour : Next, lui même basé sur React, une bibliothèque JavaScript permettant de développer des interfaces utilisateur de haut vol. De quoi répondre à vos besoins les plus fous.
Maintenant, à vous de deviner : notre site urule.fr, statique ou dynamique ? ;)