Modes de rendu

Le code de votre projet Astro doit être rendu en HTML pour être affiché sur le web.

Les pages Astro, les routes et les points de terminaison d’API peuvent être soit rendus au moment de la construction, soit rendus à la demande par un serveur lorsqu’une route est demandée. Avec Astro islands, vous pouvez également inclure un rendu côté client si nécessaire.

Dans Astro, la plupart des traitements sont effectués sur le serveur, et non dans le navigateur. Cela rend généralement votre site ou votre application plus rapide que le rendu côté client lorsqu’il est visualisé sur des appareils moins puissants ou sur des connexions internet plus lentes. Le HTML rendu par le serveur est rapide, convivial pour les moteurs de recherche et accessible par défaut.

Mode du serveur output

Titre de la section Mode du serveur output

Vous pouvez configurer le mode de rendu de vos pages dans votre configuration output.

Pré-rendu

Titre de la section Pré-rendu

Le mode de rendu par défaut est output : 'static', qui crée le HTML pour toutes les routes de votre page au moment de la construction.

Dans ce mode, votre site entier sera pré-rendu et le serveur aura toutes les pages construites à l’avance et prêtes à être envoyées au navigateur. Le même document HTML est envoyé au navigateur pour chaque visiteur, et une reconstruction complète du site est nécessaire pour mettre à jour le contenu de la page. Cette méthode est également connue sous le nom de génération de site statique (SSG).

Par défaut, tous les projets Astro sont configurés pour être pré-rendus au moment de la construction (générés statiquement) afin d’offrir au navigateur l’expérience la plus légère possible. Le navigateur n’a pas besoin d’attendre que le code HTML soit créé, car le serveur n’a pas besoin de générer des pages à la demande. Votre site ne dépend pas des performances d’une source de données dorsale et, une fois construit, il restera accessible aux visiteurs en tant que site statique tant que votre serveur fonctionnera.

Les sites statiques peuvent inclure des îles Astro pour des composants d’interface utilisateur interactifs (ou même des applications complètes intégrées côté client !) écrits dans le Framework UI de votre choix dans une page par ailleurs statique et pré-rendue.

L’API View Transitions d’Astro est également disponible en mode “statique” pour l’animation et la persistance de l’état à travers la navigation de la page. Les sites statiques peuvent également utiliser les middleware pour intercepter et transformer les données de réponse d’une requête.

Astuce

Le mode static par défaut d’Astro est un choix puissant et moderne pour les sites a fort contenu qui ne sont pas mis à jour fréquemment, et qui affichent le même contenu de page à tous les visiteurs.

Rendu à la demande

Titre de la section Rendu à la demande

Avec un adaptateur SSR, les deux autres modes de sortie d’Astro peuvent être configurés pour afficher à la demande une partie ou la totalité de vos pages, routes ou points d’extrémité d’API :

• output: 'server' pour les sites très dynamiques avec la plupart ou toutes les routes à la demande.
• output: 'hybrid' pour les sites principalement statiques avec quelques routes à la demande.

Puisqu’ils sont générés à chaque visite, ces itinéraires peuvent être personnalisés pour chaque visiteur. Par exemple, une page rendue à la demande peut montrer à un utilisateur connecté ses informations de compte ou afficher des données fraîchement mises à jour sans nécessiter une reconstruction complète du site. Le rendu à la demande sur le serveur au moment de la requête est également connu sous le nom de server-side rendering (SSR).

En savoir plus sur les fonctionnalités disponibles avec le rendu à la demande et un adaptateur, telles que les cookies, les objets Response et Request, le streaming HTML, et plus encore.

.

Envisagez d’activer le mode “serveur” ou “hybride” dans votre projet Astro si vous avez besoin de ce qui suit :

• Points de terminaison d’API : Créer des pages spécifiques qui fonctionnent comme des points de terminaison API pour des tâches telles que l’accès à la base de données, l’authentification et l’autorisation, tout en gardant les données sensibles cachées au client.

• Pages protégées : Restreignez l’accès à une page en fonction des privilèges de l’utilisateur, en gérant l’accès de l’utilisateur sur le serveur.

• Contenu changeant fréquemment : Générez des pages individuelles sans avoir à reconstruire votre site de manière statique. Ceci est utile lorsque le contenu d’une page est souvent mis à jour, par exemple en affichant des données provenant d’une API appelée dynamiquement avec fetch().

Les modes de sortie server et hybrid vous permettent d’inclure des îles Astro pour l’interactivité (ou même des applications entières rendues côté client !) dans le Framework UI de votre choix. Avec les middlewares et l’API de transition de vues d’Astro pour les animations et la préservation de l’état à travers les itinéraires de navigation, même les applications hautement interactives sont possibles.

Astuce

Le rendu serveur à la demande dans Astro, en particulier lorsqu’il est combiné avec view transitions, offre une véritable expérience d’application sans la surcharge JavaScript d’une application avec une page unique côté client.