Comparaison complète des sites Web statiques et dynamiques – techsyncer

Lorsque de nombreuses personnes pensent à un site web, le concept de sites web statiques vs dynamiques ne vient jamais à l’esprit. Après tout, le site web apparaît simplement, n’est-ce pas ? Techniquement oui, mais il y a beaucoup de choses qui se passent en coulisses.

Pour quelqu’un qui prévoit de créer ou de migrer un site web, il est essentiel de connaître ces deux types de sites web. Le type de site que vous choisissez aura une incidence sur la façon dont les développeurs gèrent et mettent à jour le site, ainsi que sur les coûts opérationnels et de maintenance éventuels.

Dans cet article, vous découvrirez les différences entre les sites web statiques et dynamiques. Vous verrez comment les développeurs créent des sites statiques et dynamiques, comment votre navigateur les rend et de nombreuses autres comparaisons utiles.

Qu’est-ce que les sites web statiques et dynamiques ?

Comme son nom l’indique, les éléments d’un site web statique sont fixes ou codés en dur. Le contenu d’un site web statique ne change jamais, quel que soit le navigateur que vous utilisez.

A static website only serves HTML, CSS, and Javascript client-side code. It doesn’t have to process any kind of computations once a reader accesses the page. The browser handles any code for dynamic content such as buttons or input.

La plupart des sites web statiques ont une vocation informative. Prenons par exemple les blogs personnels, où l’objectif est d’afficher des informations pour les lecteurs. Sur un blog personnel, les utilisateurs parcourent généralement le contenu du site.

Inversement, un site web dynamique va au-delà du code côté client. En fin de compte, un site web dynamique est basé sur HTML et CSS, tout comme un site web statique. Mais, pour qu’un site web dynamique soit fonctionnel, il nécessite des langages côté serveur tels que PHP, ASP.net, ou JavaScript pour générer du code HTML dynamiquement.

Les sites web dynamiques utilisent le terme CRUD, qui signifie Create, Read, Update, Delete. CRUD représente les opérations effectuées sur une base de données. Et si vous avez deviné que les sites web dynamiques utilisent des bases de données, alors vous avez deviné juste!

Différences de rendu des sites web

Comment les serveurs web livrent-ils des sites web statiques et dynamiques aux navigateurs des lecteurs?

Les sites web statiques livrent exactement le code sur le serveur web

Rappelez-vous que les sites web statiques contiennent des documents HTML codés en dur avec éventuellement des fichiers CSS et JS. Le code que vous téléchargez sur un serveur web est précisément le code qui sera servi aux utilisateurs qui naviguent sur votre site web.

Par exemple, ci-dessous se trouve un projet de site web statique dans Visual Studio Code qui contient trois fichiers. La page d’accueil de ce site web statique affiche uniquement un en-tête et un bouton.

Lorsque vous cliquez sur le bouton de cette page web simple, un mot sera révélé.

Static Website Project in Visual Studio Code

Voici le code du fichier index.html. Cela sert de page d’accueil du site web statique.

<!-- index.html -->
<html>
    <head>
        <title>Static Site Test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Static Web Test</h1>
        <div>
            <button>Click to see what happens</button>
        </div>
        <p style="display: none;">Surpise!!!</p>
        <script src="button.js"></script>
    </body>
</html>

Le code suivant concerne le fichier style.css. Ce fichier CSS définit le style des éléments de la page d’accueil tels qu’ils apparaissent dans le navigateur.

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
    background: lightgrey;
    color: black;
    border: 1px solid darkgray;
    font: inherit
}

Enfin, le code ci-dessous est le code pour le fichier button.js qui contient le code JavaScript que le navigateur déclenchera lorsque le lecteur cliquera sur le bouton.

// button.js
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
    document.querySelector('p').style.display = 'block'
})

Supposons que le site web statique soit maintenant en ligne, la démonstration ci-dessous montre à quoi il ressemblerait. Ensuite, si vous ouvrez le code source de la page, vous devriez voir que le code de la page est exactement le même que le code source du fichier index.html.

Remarque : Cet exemple de site web statique a été testé à l’aide de l’extension HTTP Server / HTML Preview dans Visual Studio Code.

Comme vous pouvez le voir dans la démo ci-dessus, même si l’utilisateur a interagi avec la page en cliquant sur un bouton, le code sous-jacent n’a jamais changé. C’est le comportement d’un site web statique ; le navigateur gère tout.

Les sites web dynamiques lisent d’abord une base de données

Contrairement à un site web statique, un site web dynamique utilise le traitement côté serveur pour générer le code. Cela signifie que le code sous-jacent de la page peut changer à tout moment, en fonction de la conception.

Par exemple, ci-dessous se trouve un projet de site web dynamique Node.js contenant un seul fichier JavaScript.

Dynamic Website Project in Visual Studio Code

Le code pour dynamicsite.js est montré ci-dessous. Ce code est un script côté serveur qui affiche l’heure de l’ordinateur à chaque fois que la page est chargée.

// dynamicsite.js
var web = require('http');

web.createServer(function (req, res) {
    let xTime = new Date().toISOString().match(/(\d{2}:){2}\d{2}/)[0]
    res.end(
        '<h1 style="font-family:verdana">Dynamic Site Test</h1>' +
        '<p style="font-family:verdana">The time now is: <b>' + xTime + '</b></p>'
    );
}).listen(8080);

La démo ci-dessous montre comment le site web dynamique est affiché. Le code HTML sous-jacent change chaque fois que la page est rafraîchie.

Note : Cet exemple de site web dynamique est testé en utilisant Node.js.

Voilà un exemple basique de comment un site web dynamique se comporte sous le capot.

Sites web statiques vs dynamiques : Comment les contenus sont-ils gérés ?

Maintenant que vous savez comment les sites web statiques et dynamiques sont rendus et servis. Comment ajouter, mettre à jour ou supprimer du contenu ? Supposons que vous ayez un blog personnel statique, comment ajoutez-vous de nouveaux posts ? Si vous avez un site e-commerce dynamique, comment ajoutez-vous de nouveaux produits dans votre catalogue ?

Le type de site web que vous définissez détermine la façon dont vous gérez le contenu de votre site web. Voici les options typiques pour la gestion de contenu.

Codage en dur de pages statiques

Lorsqu’un site web ou son contenu doit être mis à jour, cela implique presque toujours des modifications dans le code. La méthode fondamentale et probablement la plus ancienne est le codage en dur. Cette méthode consiste à modifier le code source du site à l’aide de n’importe quel éditeur de texte.

Cette méthode peut être la plus fastidieuse et la plus chronophage car chaque aspect du site web doit être codé manuellement. Cependant, cela donne également aux sites web statiques une flexibilité en termes de conception car chaque page peut être différente.

Certains sites web au design et à la fonctionnalité simples peuvent tirer parti de l’écriture de leur contenu en Markdown. Ensuite, convertissez ces documents Markdown en HTML, ce qui permet de produire des pages web pouvant ensuite être téléchargées sur le serveur web.

Par exemple, le site web statique ci-dessous comporte trois pages : index.html, page1.html et page2.html. Bien que ces fichiers fassent partie d’un même site web statique, ils ont été rédigés avec des designs ou des thèmes différents.

Example of a static website with different page themes

Générateurs de sites web statiques

Au lieu d’écrire manuellement du code, les générateurs de sites web statiques offrent la possibilité de créer un site web statique complet, soit à partir de zéro, soit à partir de modèles préétablis. Les nouveaux articles ou pages sont généralement rédigés en Markdown, et des fichiers HTML sont générés lors du processus de construction du site web.

Les fichiers résultants peuvent ensuite être téléchargés sur un serveur web pour donner vie au site web. Dans certains générateurs de sites web statiques, il est également possible d’écrire du contenu dans d’autres formats tels que du HTML pur et du JSON.

Voici la liste de certains des générateurs de sites web statiques les plus populaires que vous pouvez explorer.

Le site d’exemple ci-dessous a été généré en utilisant Jekyll sans avoir à taper une seule ligne de code.

Système de gestion de contenu (CMS)

À présent, vous avez entendu parler de WordPress. Et que diriez-vous de Drupal, Joomla et Netlify? Ce sont les noms des systèmes de gestion de contenu les plus populaires ou CMS.

A CMS is a tool used for creating content on a website without having to write a single line of code. Think of it as the GUI editor where you can create your content without understaning the underlying code.

Les sites web dynamiques se connectent généralement à un CMS. En fait, lorsque vous achetez un forfait d’hébergement web, celui-ci inclut déjà des constructeurs de sites web et des CMS qui peuvent être déployés en un seul clic (ou quelques clics) de souris. Le CMS est probablement la raison pour laquelle les sites web dynamiques sont le choix populaire.

Les sites web statiques peuvent également être configurés pour utiliser des CMS. Par exemple, Netlify prend en charge l’intégration avec des générateurs de sites statiques tels que Jekyll, Hugo et NextJS. Bien que la configuration de l’intégration avec ces plateformes nécessite généralement plus de travail par rapport aux sites web dynamiques.

Quand utiliser un site web statique par rapport à un site web dynamique

Si vous vous demandez quand la question ancestrale sera résolue « Lequel est meilleur ? », vous pouvez continuer à attendre. Il n’y aura probablement pas de vainqueur définitif. Que ce soit un site web dynamique ou statique est meilleur est subjectif en fonction de vos besoins.

Il y a beaucoup de choses à prendre en compte lors du choix du type de site web. Voici quelques-uns des facteurs à considérer.

Factor	Static Website	Dynamic Website
Cost	Static sites are typically cheaper to host. They can even be hosted for free using GitHub Pages.	Because of the expected extra processing requirement, dynamic websites may need a more capable hosts. Higher host specs usually means higher cost.
Content Management	To update content, coding skills will be required to write HTML or Markdown (and other languages). There are established and emerging headless CMS options that support static websites.	Established and popular content management systems already exists such as WordPress, Drupal, and Joomla. Updating content may never need a developer’s involvement. Users would be able to manage content on their own. This could translate to development or maintenance cost savings in the long run.
Extensibility	Add-ins may not be available to static websites. But, third party services may be integrated into a static website. Some examples are Disqus and MailChimp.	There are tools and add-ins that can extend the functionality and optimization of dynamic websites.
Security	Securing a static website can be more complex due to JavaScript running on the browser and can be exploited. This is not to say that static websites cannot be secured. It’s just that developers need to be more creative for security.	Dynamic website security may be easier to achieve as there are already best practices, libraries and tools that are included in server-side languages.
Complexity	Knowing HTML, CSS and JavaScript are the basic coding skills for static website development. Other languages may be needed only if you use static site generators.	Typically requires more web development skills and knowledge of more programming languages.
Backup/Recovery	Only files are being backed up. If the website crashes, files can be restored to recover a static website.	There may be a need for more complex backup. In addition to backing up the website, there may be databases that need to be backed up as well.
	Static vs Dynamic Website

Conclusion

Si vous possédez déjà un site web, vous savez probablement déjà s’il s’agit d’un site web statique ou dynamique. Sinon, vous devriez avoir appris dans cet article comment les distinguer.

A static website does not mean that what you see on the page does not change at all. It only means that the content or underlying code is pre-built and never changes. Each time a reader views a page from a static website, the same code is served over and code.

A dynamic website does not mean that no homepage or HTML code is being served. Instead, the server generates the HTML page dynamically. Each request to the dynamic website may yield different content, and the HTML code behind the page typically changes.

Si vous prévoyez simplement de construire un nouveau site web, votre choix dépendra largement de son objectif. Par exemple, les sites web de commerce électronique et de recrutement peuvent être mieux adaptés aux sites web dynamiques. Alors qu’un blog ou un site web portfolio se contentera de sites web statiques.

Les sites web statiques sont là depuis le début et ne disparaîtront probablement jamais. Surtout maintenant que les générateurs de sites statiques gagnent en popularité. Les sites web dynamiques ne feront que s’améliorer à mesure que le développement continuera.

Lectures complémentaires

N’hésitez pas à consulter ces autres articles ATA si vous souhaitez en savoir plus sur les sites web statiques et dynamiques.

Comment héberger un site statique Azure soutenu par Cloudflare