Sans s’en rendre compte, tous les jours, nous utilisons des pages web dynamiques comme si c’était naturel. Aujourd’hui, nous allons découvrir les différentes technologies qui permettent de générer du contenu dynamique au sein des pages web, c’est-à-dire une page web dynamique.
Les pages web dynamiques, qu’est-ce que c’est ?
Une page web dynamique est nommée ainsi pas directe opposition aux pages web statiques, pour mieux expliquer ce que sont les pages web dynamiques, nous allons survoler celles qui ne le sont pas.
Une page web statique est écrite avec deux langages : l’HTML et le CSS. Leur particularité est que ces formats sont directement interprétés par le navigateur et leur contenu ne peut pas changer. En effet, le HTML est juste un langage qui permet la mise en page, un peu comme un document Word, le CSS lui est un langage qui permet d’appliquer un style au texte, à la manière ici d’un thème appliqué à un document Word.
Or, quand on voit le web aujourd’hui bon nombre de pages sont interactives, en prenant l’exemple de Google, l’intérêt des pages web dynamiques est dans le fait qu’elle n’est pas figée, ainsi peu importe le terme recherché, on pourra avoir une page à la demande, générée à la volée, alors que si Google était statique il faudrait écrire et mettre à jour toutes les pages. Cela prendrait beaucoup de place, et, surtout, Google ne pourrait répondre à toutes nos requêtes.
Pages web dynamiques : quelles technologies utilisées ?
Dans les faits, plusieurs technologies existent et elles ont chacune leurs avantages et leurs inconvénients. En effet, les modifications de la page peuvent s’opérer du côté serveur, on appelle ça le Server Side Rendering (SSR), mais elles peuvent aussi se passer du côté client, ici, c’est du Client Side Rendering (CSR), c’est-à-dire sur l’ordinateur qui charge les pages web dynamiques.
Le Server Side Rendering ou SSR
Le SSR est la base du fonctionnement du web et donc des pages web dynamiques. On rencontre sur ce terrain le très populaire PHP et tous les frameworks qui gravitent autour, mais encore l’ASP et le JavaScript, avec le serveur Node.js qui fait également son apparition sur plus en plus de serveurs. Il faut noter qu’à la fin d’un rendu côté serveur les éléments transmis au client n’est autre que du HTML et du CSS généré à la volée, car le navigateur ne peut interpréter que ceux-ci. Si vous voulez le vérifier, il vous suffit de faire un clic droit sur la page et afficher le code source pour voir le code html de la page que vous lisez actuellement, mais en réalité Rotek est un blog WordPress, qui est un programme qui gère les articles (CMS) écrit en PHP, pourtant vous voyez bien de l’HTML.
C’est ici que toute la magie opère, avec le SSR, on peut accéder à des données stockées sur le serveur pour les intégrer dans les pages web dynamiques sans y donner un accès direct. Par exemple, quand vous vous connectez à votre compte sur un site, vous ne pouvez pas voir les adresse mail des autres inscrits. C’est là toute la force des technologies SSR, elles permettent de mettre en place des systèmes d’authentification de manière très simple, mais également sécurisé, car les données sont lues du côté serveur et on ne renvoie que celles demandées.
Pour donner un exemple concret, quand j’écris cet article, il est ajouté à une base de donnée et affiché sur la page d’accueil automatiquement, ce qui constitue un gain considérable de temps.
Le SSR présente plusieurs autres avantages comme un chargement plus rapide des pages, à condition d’avoir un serveur performant, ce qui présente par ailleurs son principal point faible : il est plus coûteux.
Le Client Side Rendering ou CSR
Le CSR est une technologie beaucoup moins mature, mais elle commence à prendre beaucoup d’ampleur, ici un seul langage existe, car c’est le seul langage qui repose sur de l’exécution et non de l’affichage qui puisse être interprété par un navigateur. Beaucoup de frameworks permettent de créer des pages entièrement en JavaScript et permettent de se passer de l’écriture d’un document HTML. Le JavaScript doit beaucoup de sa popularité à Google Chrome qui avec son moteur v8, un composant du navigateur, a permis de rendre le traitement du JavaScript beaucoup plus rapide. Il a donc apporté la possibilité d’exécuter du code beaucoup plus lourd en un temps record sur la machine client.
Le JavaScript, utile pour des pages web dynamiques, nécessite par contre beaucoup plus de lignes de codes pour arriver à un résultat similaire au PHP. Il a par contre un gros avantage, c’est qu’il permet des économies considérables du côté serveur, en effet, il n’y a plus besoin de programme du côté serveur, on peut fournir des fichiers statiques au client qui lui traitera le JavaScript pour rendre la page dynamique de son côté, et pour les pages un peu plus complexe, on peut imaginer avoir besoin d’une API (qui permet au client de demander des données à un serveur) qui est un programme beaucoup moins gourmand en ressources et donc moins coûteux. Le vrai problème aujourd’hui avec le JavaScript est l’accès aux bases de données, en effet les données doivent être exposées au client, et la mise en place d’un système d’authentification est bien plus laborieuse.
Conclusion
En bref, on peut noter que le choix du côté de rendu des pages web dynamiques, que ça soit serveur ou client, est un élément clé à déterminer en fonction du besoin. Pour un site vitrine, on devrait privilégier un site statique avec des éléments rendus côté client pour peaufiner le côté esthétique. Pour une boutique en ligne ou un blog, il vaut mieux privilégier le rendu côté serveur, d’un côté pour la sécurité et de l’autre pour la quantité de contenu à distribuer qui représenterait une très grosse charge du côté client.
Pour les pages web dynamiques de sites très complets, on peut utiliser un mélange des deux, c’est justement ce que permet le framework PHP Laravel, qui permet de créer ses pages en PHP et les rendre du côté serveur, et d’intégrer des Vues (du framework Vue.js), qui sont des petits composants capables de se mettre à jour en temps réel, et qui sont eux rendus du côté serveur.
Par expérience personnelle, je suis moi-même développeur web et j’apprécie énormément le framework Laravel qui permet de rallier le meilleur des deux technologies. Si vous avez des questions à poser ou que des points vous semblent flous, n’hésitez pas à rejoindre le serveur Discord de Rotek !