Qu’est-ce que le rendu côté serveur ?
Le rendu côté serveur (SSR) génère le HTML initial d’une page sur le serveur et l’envoie au navigateur. Le JavaScript côté client peut ensuite hydrater ce HTML pour permettre des interactions.
Fonctionnement du rendu côté serveur
Le SSR effectue le rendu des composants sur un serveur à chaque requête ou à partir d’un cache côté serveur, produisant une représentation HTML qui peut être affichée avant l’exécution du bundle de l’application. L’hydratation rattache ensuite la logique côté client au balisage correspondant lorsque des interactions sont nécessaires. Cela diffère de la génération statique, qui crée le HTML avant les requêtes, et des pages entièrement rendues côté client, qui commencent par une structure minimale. Le SSR intervient dans le chemin de diffusion web et peut combiner le contexte de la requête, les données du serveur applicatif et le routage avant la réponse.
Points clés
- L’hydratation suppose que l’arbre initial côté client corresponde au balisage du serveur ; les paramètres régionaux, l’heure, les valeurs aléatoires ou les branches réservées au navigateur peuvent provoquer des divergences et rendre certains traitements inutiles.
- Le rendu côté serveur peut rendre les premiers contenus disponibles plus tôt, mais la lenteur des données du serveur applicatif ou des calculs non mis en cache augmente le délai avant le premier octet, sauf si les résultats des traitements sont transmis progressivement ou mis en cache.
- Le code exécuté pendant le SSR n’a pas accès au DOM du navigateur, et les composants marqués pour le client peuvent quand même être rendus sur le serveur pour produire le HTML initial. Consultez donc window ou document uniquement dans du code réservé au navigateur, comme les effets ou les gestionnaires d’événements, et chargez les modules qui y accèdent lors de leur importation au moyen d’un import dynamique côté client.
Quand le rendu côté serveur est utile
Utilisez le SSR lorsque le contenu initial, les aperçus de liens, la découverte par les moteurs de recherche ou la résilience sans JavaScript sont importants. Il ajoute un travail de rendu sur le serveur et peut provoquer des erreurs d’hydratation si le résultat produit par le navigateur diffère du HTML du serveur.