Rendu côté serveur avec Vite

Bienvenue dans le dernier article de ma veille technologique sur le serveur de développement Vite. Aujourd'hui, nous allons en apprendre plus sur le rendu côté serveur (Server-Side Rendering) et comment l'utiliser avec Vite.

Qu'est-ce que le rendu côté serveur ?

Typiquement, pour afficher une page Internet avec Vite, le serveur va empaqueter les dépendances et le code source et il va les envoyer au navigateur pour qu'il fasse le rendu avec tous les modules nécessaires. Dans le cas d'une application qui intègre le rendu côté serveur, le serveur va générer tout le contenu de la page HTML demandée avant de l'envoyer au navigateur pour être affichée. C'est-à-dire qu'il va faire exécuter tout le code JavaScript qui est associé à une page comme des requêtes de données à un API ou le rendu de composants avant de produire du contenu HTML complet. Le navigateur n'exécutera donc que du code JavaScript minimal.

L'avantage d'utiliser cette méthode est le déchargement de la tâche de rendu du côté client ce qui peut améliorer les performances de rendu. Cependant, il faut garder à l'esprit que le serveur qui héberge le site aura une charge de travail plus imposante et la mise en place de cette technique pourrait être plus ardue.

Parmi les avantages de cette technique, on peut compter :

• Performance accrue
• Meilleure optimisation du référencement naturel (SEO)
• Meilleure expérience utilisateur
• Réduction du risque des vulnérabilités liées à l'exécution côté client

Meilleurs cas d'utilisation :

• Sites lourds en contenu
• Sites qui ont besoin d'un bon référencement naturel
• Réseau Internet lent

Comment l'utiliser avec Vite ?

Pour utiliser le rendu côté serveur avec Vite, on peut échafauder un projet avec la commande suivante :

npm create vite-extra@latest mon-app-vue -- --template ssr-vanilla

On peut aussi s'inspirer de différents modèles d'échafaudages si le but est de l'intégrer dans un projet existant. Ceux-ci sont disponibles sur le dépôt create-vite-extra.

- index.html
- server.js # main application server
- src/
  - main.js          # exports env-agnostic (universal) app code
  - entry-client.js  # mounts the app to a DOM element
  - entry-server.js  # renders the app using the framework's SSR API

Source: Server-Side Rendering

Si l’on regarde la structure du projet, on peut voir le fichierindex.html qui sert toujours de point d'entrée de l'application comme une application Vite régulière. Cependant, dans cette version du fichier, on va faire référence au fichier entry-client.js qui va inclure le code source qui sera rendu dans le navigateur et il va y avoir un espace réservé dans la balise div principale où le code HTML généré par le serveur pourra être inséré. Puis, il y a le fichier entry-server.js. Celui-ci va contenir le code qui devra être généré sur le serveur avant d'être envoyé au navigateur. Après, il y a le fichier server.js qui est le serveur principal de l'application. C'est lui qui va permettre de contrôler le rendu de la page. Il y a plusieurs moyens d'intégrer le rendu côté serveur, mais dans cet exemple le cadre d'application Express.js a été utilisé afin de communiquer entre le serveur de Vite et le serveur de Node.js. Finalement, il est important que le fichier package.json ait le script "dev": "node server" afin qu'il puisse être démarré lors du développement.

Pour démarrer le serveur de développement, on utilise la même commande que d'habitude.

npm run dev

Référence

1. Vite. "Server-Side Rendering". Consultée le 17 mars 2025. https://vite.dev/guide/ssr.html

2. Cloudinary. "What Is Server-Side Rendering". Consultée le 17 mars 2025. https://cloudinary.com/guides/automatic-image-cropping/server-side-rendering-benefits-use-cases-and-best-practices