Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix
Le contenu de cette page a été traduit à l'aide d'une IA.
Voir la dernière version du contenu original en anglaisSi vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.
Lien GitHub de la documentationCopier le Markdown du doc dans le presse-papiers
import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';
import RecipeLinks from '/components/RecipeLinks.astro';
import IntegrationsNav from '/components/IntegrationsNav.astro';
import ReadMore from '/components/ReadMore.astro';
Le code de votre projet Astro doit être rendu en HTML pour être affiché sur le Web.
Par défaut, les pages Astro, les routes et les points de terminaison d'API seront pré-rendus au moment de la compilation sous forme de pages statiques. Cependant, vous pouvez choisir de restituer tout ou partie de vos routes à la demande par un serveur lorsqu'une route est demandée.
Les pages et routes rendues à la demande sont générées par visite et peuvent être personnalisées pour chaque visiteur. Par exemple, une page rendue à la demande peut montrer à un utilisateur connecté ses informations de compte ou afficher des données récemment mises à jour sans nécessiter une nouvelle compilation complète du site.
Le rendu à la demande sur le serveur au moment de la demande est également connu sous le nom de rendu côté serveur (SSR).
Adaptateurs de serveur
Pour afficher une page à la demande, vous devez ajouter un adaptateur. Chaque adaptateur permet à Astro de générer un script qui exécute votre projet sur un environnement d'exécution spécifique : l'environnement qui exécute le code sur le serveur pour générer des pages lorsqu'elles sont demandées (par exemple, Netlify, Cloudflare).
Vous pouvez également souhaiter ajouter un adaptateur même si votre site est entièrement statique et que vous ne restituez aucune page à la demande. Par exemple, l'adaptateur Netlify active le CDN d'images de Netlify et les îlots de serveur nécessitent l'installation d'un adaptateur pour utiliser server:defer sur un composant.
Astro maintient des adaptateurs officiels pour Node.js, Netlify, Vercel et Cloudflare. Vous pouvez trouver des adaptateurs officiels et communautaires dans notre répertoire d'intégrations. Choisissez celui qui correspond à votre environnement de déploiement.
Ajouter un adaptateur
Vous pouvez ajouter n'importe quelle intégration d'adaptateur officielle maintenue par Astro avec la commande astro add suivante. Cela installera l'adaptateur et apportera les modifications appropriées à votre fichier astro.config.mjs en une seule étape.
Par exemple, pour installer l’adaptateur Netlify, exécutez :
Vous pouvez également ajouter un adaptateur manuellement en installant le paquet NPM (par exemple @astrojs/netlify) et en mettant à jour astro.config.mjs vous-même.
Notez que différents adaptateurs peuvent avoir des paramètres de configuration différents. Lisez la documentation de chaque adaptateur et appliquez les options de configuration nécessaires à l'adaptateur choisi dans astro.config.mjs
Activation du rendu à la demande
Par défaut, l'intégralité de votre site Astro sera pré-rendu et des pages HTML statiques seront envoyées au navigateur. Cependant, vous pouvez désactiver le pré-rendu sur toutes les routes qui nécessitent un rendu sur le serveur, par exemple, une page qui vérifie les cookies et affiche du contenu personnalisé.
Tout d’abord, ajoutez une intégration d’adaptateur pour l’exécution de votre serveur pour activer le rendu du serveur à la demande dans votre projet Astro.
Ensuite, ajoutez export const prerender = false en haut de la page ou du point de terminaison individuel que vous souhaitez afficher à la demande. Le reste de votre site restera un site statique :
Copier le code dans le presse-papiers
---export const prerender = false---<html><!--Ce contenu sera rendu sur le serveur à la demande !Ajoutez simplement une intégration d’adaptateur pour un environnement d’exécution de serveur !Toutes les autres pages sont générées statiquement au moment de la compilation !--><html>L'exemple suivant montre comment désactiver le prérendu afin d'afficher un nombre aléatoire à chaque fois que le point de terminaison est atteint :
Copier le code dans le presse-papiers
export const prerender = false;export async function GET() { let number = Math.random(); return new Response( JSON.stringify({ number, message: `Voici un nombre aléatoire : ${number}`, }), );}Mode 'server'
Pour une application hautement dynamique, après avoir ajouté un adaptateur, vous pouvez définir la configuration de votre sortie de compilation sur output: 'server' pour effectuer le rendu par défaut de toutes vos pages sur le serveur. Cela revient à désactiver le prérendu sur chaque page.
Ensuite, si nécessaire, vous pouvez choisir d'effectuer le prérendu des pages individuelles qui ne nécessitent pas d'exécution de serveur, comme une politique de confidentialité ou une page à propos.
Copier le code dans le presse-papiers
---export const prerender = true---<html><!--`output: 'server'` est configuré, mais cette page est statique !Le reste de mon site est rendu à la demande !--><html>Ajoutez export const prerender = true à n'importe quelle page ou route pour effectuer le prérendu d'une page statique ou d'un point de terminaison :
Copier le code dans le presse-papiers
export const prerender = true;export async function GET() { return new Response( JSON.stringify({ message: `Ceci est mon point de terminaison statique`, }), );}:::tip Commencez avec le mode static par défaut jusqu'à ce que vous soyez sûr que la plupart ou la totalité de vos pages seront rendues à la demande ! Cela garantit que votre site est aussi performant que possible, sans dépendre d'une fonction serveur pour restituer le contenu statique.
Le mode de sortie 'server' n'apporte aucune fonctionnalité supplémentaire. Il modifie uniquement le comportement de rendu par défaut. :::
Pour en savoir plus sur le paramètre output, consultez la référence de configuration.
Fonctionnalités de rendu à la demande
Streaming HTML
Avec le streaming HTML, un document est divisé en morceaux, envoyé sur le réseau dans l'ordre et affiché sur la page dans cet ordre. Astro utilise le streaming HTML dans le rendu à la demande pour envoyer chaque composant au navigateur au fur et à mesure qu'il les affiche. Cela permet à l'utilisateur de voir votre code HTML le plus rapidement possible, bien que les conditions du réseau puissent ralentir le téléchargement des documents volumineux et que l'attente des récupérations de données puisse bloquer le rendu de la page.
<RecipeLinks slugs={["fr/recipes/streaming-improve-page-performance"]}/>
:::caution Les fonctionnalités qui modifient les en-têtes de réponse ne sont disponibles qu'au niveau de la page. (Vous ne pouvez pas les utiliser à l'intérieur des composants, y compris les composants de mise en page.) Au moment où Astro exécute le code de votre composant, il a déjà envoyé les en-têtes de réponse et ils ne peuvent pas être modifiés.
:::
Cookies
Une page ou un point de terminaison d'API rendu à la demande peut vérifier, définir, obtenir et supprimer les cookies.
L'exemple ci-dessous met à jour la valeur d'un cookie pour un compteur de pages vues :
Copier le code dans le presse-papiers
---export const prerender = false; // Non nécessaire en mode `server`let counter = 0if (Astro.cookies.has('counter')) { const cookie = Astro.cookies.get('counter') const value = cookie?.number() if (value !== undefined && !isNaN(value)) counter = value + 1}Astro.cookies.set('counter', String(counter))---<html> <h1>Compteur = {counter}</h1></html>Voir plus de détails sur Astro.cookies et le type AstroCookie dans la référence de l'API.
Response
Astro.response est un objet ResponseInit standard. Il peut être utilisé pour définir l'état de la réponse et les en-têtes.
L'exemple ci-dessous définit un statut de réponse et un texte de statut pour une page de produit lorsque le produit n'existe pas :
Copier le code dans le presse-papiers
---export const prerender = false; // Non nécessaire en mode `server`import { getProduct } from '../api';const product = await getProduct(Astro.params.id);// Aucun produit trouvéif (!product) { Astro.response.status = 404; Astro.response.statusText = 'Non trouvé';}---<html> <!-- Page ici... --></html>Astro.response.headers
Vous pouvez définir des en-têtes à l'aide de l'objet Astro.response.headers :
Copier le code dans le presse-papiers
---export const prerender = false; // Non nécessaire en mode `server`Astro.response.headers.set('Cache-Control', 'public, max-age=3600');---<html> <!-- Page ici... --></html>Renvoyer un objet Response
Vous pouvez également renvoyer un objet Response directement depuis n'importe quelle page en utilisant le rendu à la demande, soit manuellement, soit avec Astro.redirect.
L'exemple ci-dessous recherche un identifiant dans la base de données sur une page dynamique et renvoie soit une erreur 404 si le produit n'existe pas, soit il redirige l'utilisateur vers une autre page si le produit n'est plus disponible, soit il affiche le produit :
Copier le code dans le presse-papiers
---export const prerender = false; // Non nécessaire en mode `server`import { getProduct } from '../api';const product = await getProduct(Astro.params.id);// Aucun produit trouvéif (!product) { return new Response(null, { status: 404, statusText: 'Not found' });}// Le produit n'est plus disponibleif (!product.isAvailable) { return Astro.redirect("/products", 301);}---<html> <!-- Page ici... --></html>Request
Astro.request est un objet Request standard. Il peut être utilisé pour obtenir l'url, les headers, la method et même le corps de la requête.
Vous pouvez accéder à des informations supplémentaires à partir de cet objet pour les pages qui ne sont pas générées statiquement.
Astro.request.headers
Les en-têtes de la requête sont disponibles sur Astro.request.headers. Cela fonctionne comme les Request.headers du navigateur. Il s'agit d'un objet Headers où vous pouvez récupérer des en-têtes tels que le cookie.
Copier le code dans le presse-papiers
---export const prerender = false; // Non nécessaire en mode `server`const cookie = Astro.request.headers.get('cookie');// ...---<html> <!-- Page ici... --></html>Astro.request.method
La méthode HTTP utilisée dans la requête est disponible sous le nom de Astro.request.method. Cela fonctionne comme la méthode Request.method du navigateur. Il renvoie la représentation sous forme de chaîne de caractères de la méthode HTTP utilisée dans la requête.
Copier le code dans le presse-papiers
---export const prerender = false; // Non nécessaire en mode `server`console.log(Astro.request.method) // GET (lorsqu'on y accède dans le navigateur)---Voir plus de détails sur Astro.request dans la référence de l'API.
Points de terminaison du serveur
Un point de terminaison de serveur, également appelé route d'API, est une fonction spéciale exportée à partir d'un fichier .js ou .ts dans le dossier src/pages/. Fonctionnalité puissante de rendu côté serveur à la demande, les routes d'API sont capables d'exécuter du code en toute sécurité sur le serveur.
La fonction prend un contexte de point de terminaison et renvoie un objet Response.
Pour en savoir plus, consultez notre guide des points de terminaison.