Optimisation de l'architecture Web avec Nginx et les Server Side Includes (SSI)

Les Server Side Includes (SSI) constituent un ensemble de directives intégrées directement dans le code HTML. Lors d'une requête client, le serveur Web interprète ces commandes pour générer du contenu dynamiquement avant d'envoyer la page finale au navigateur. Cette approche permet d'agréger différents fragments HTML sans recourir à des langages de script complexes comme PHP ou à des applications CGI.

Pourquoi adopter la technologie SSI ?

Dans le développement de sites Web statiques ou gérés par un CMS, de nombreux éléments sont redondants (en-têtes, menus de navigation, pieds de page). Copier-coller ces blocs sur chaque page rend la maintenance laborieuse et sujette aux erreurs. En utilisant SSI, on segmente la page en modules indépendants. Une modification effectuée sur un seul fichier "source" est immédiatement répercutée sur l'ensemble du site.

Nginx supporte nativement cette fonctionnalité via son module intégré, sans nécessiter d'extensions tierces. La fusion des composants s'opère au niveau du serveur, ce qui est transparent pour l'utilisateur final.

Configuraton de Nginx pour activer le SSI

Pour activer l'interprétation des directives SSI, il suffit de modifier le bloc server ou location dans le fichier de conifguration nginx.conf.

server {
    listen       8080;
    server_name  localhost;

    # Activation du moteur SSI
    ssi on;
    
    # Masquer les messages d'erreur en cas de fragment manquant
    ssi_silent_errors on;

    location / {
        root   /var/www/projet_web;
        index  accueil.html;
    }
}

Exemple de modularisation d'une page

Imaginons une structure de projet où les éléments communs sont isolés dans un répertoire nommé /components/.

1. Le fichier principal (accueil.html)

On utilise la directive include virtual pour appeler les sous-pages.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma Page Modulaire</title>
</head>
<body>
    <!-- Appel de la barre de navigation -->
    <!--#include virtual="/components/nav.html" -->

    <main>
        <h1>Bienvenue sur le contenu principal</h1>
        <p>Ce texte appartient au fichier racine.</p>
    </main>

    <!-- Appel du pied de page -->
    <!--#include virtual="/components/footer.html" -->
</body>
</html>

2. Le fragment de navigation (nav.html)

<nav>
    <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

3. Le fragment de pied de page (footer.html)

<footer>
    <p>© 2023 - Tous droits réservés</p>
</footer>

Directives principales de configuration

ssi on | off : Active ou désactive le traitement des fichiers par le module SSI.
ssi_silent_errors on | off : Si activé, le serveur ne renverra pas de message d'erreur visible ("[an error occurred while processing the directive]") en cas d'échec de chargement d'un fragment.
ssi_types : Par défaut, seul le type text/html est traité. Si vous utilisez des extensions spécifiques comme .shtml, il faut les déclarer ici.
ssi_value_length : Définit la longueur maximale des valeurs des paramètres dans les directives SSI.

Application des modifications

Après avoir configuré Nginx et structuré vos fichiers, validez la syntaxe et redémarrez le service :

# Test de la configuration
nginx -t

# Rechargement à chaud
nginx -s reload

Désormais, lors de la consultation de accueil.html, Nginx assemblera dynamiquement les fragments nav.html et footer.html pour délivrer un document HTML complet au client.

Étiquettes: nginx SSI Web-Server HTML Modular-Design

Publié le 13 juillet à 04h23

L'Atelier Monstre