Aller au contenu
v5-beta

Adaptateurs de rendu à la demande

Astro vous permet d’opter pour un rendu à la demande pour une partie ou la totalité de vos pages et de vos points de terminaison. C’est ce qu’on appelle le server-side rendering (SSR) : il s’agit de générer des pages HTML sur le serveur lorsqu’elles sont demandées et de les envoyer au client. Un adaptateur est utilisé pour exécuter votre projet sur le serveur et gérer ces demandes.

Ce rendu à la demande vous permet :

  • D’implémenter des sessions pour l’état de connexion dans votre application
  • De rendre les données d’une API appelée dynamiquement avec fetch().
  • De déployer votre site sur un hôte en utilisant un adaptateur.

Envisagez d’activer le rendu de serveur à la demande 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 fréquemment mis à jour.

Adaptateurs officiels

Titre de la section Adaptateurs officiels

Astro maintient des adaptateurs officiels pour Node.js, Vercel, Netlify, et Cloudflare.

Vous trouverez d’autres adaptateurs gérés par la communauté (par exemple Deno, SST, AWS) dans notre répertoire d’intégrations.

Adaptateurs SSR

Activer le rendu à la demande du serveur

Titre de la section Activer le rendu à la demande du serveur

Les deux modes de rendu à la demande d’Astro (server et hybrid) vous permettent de profiter des performances d’un site statique en effectuant un pré-rendu des routes individuelles lorsque cela est possible, que vous ayez une application entièrement dynamique ou un site principalement statique qui ne nécessite un rendu à la demande que pour certaines routes.

Pour décider laquelle utiliser dans votre projet, choisissez l’option output qui représente comment la plupart de vos pages et routes seront rendues :

  • output: 'server' : Rendu à la demande par défaut. Utilisez cette option lorsque la plupart ou la totalité de votre site ou application doit être rendue sur le serveur à la demande. Chaque page individuelle ou point d’arrivée peut opter pour un pré-rendu.
  • output: 'hybrid' : Pré-rendu en HTML par défaut. Utilisez cette option lorsque la majeure partie de votre site doit être statique. Chaque page individuelle ou point de terminaison peut s’exclure du pré-rendu.

Parce que le serveur devra générer au moins quelques pages à la demande, ces deux modes nécessitent que vous ajoutiez un adaptateur pour exécuter les fonctions du serveur.

Ajouter un adaptateur

Titre de la section Ajouter un adaptateur

Pour déployer un projet en mode server ou hybrid, vous devez ajouter un adaptateur. En effet, ces deux modes nécessitent un runtime serveur : l’environnement qui exécute le code sur le serveur pour générer des pages lorsqu’elles sont demandées. Chaque adaptateur permet à Astro de générer un script qui exécute votre projet sur un runtime spécifique, tel que Vercel, Netlify ou Cloudflare.

Vous pouvez trouver les adaptateurs officiels et communautaires dans notre répertoire d’intégrations. Choisissez celui qui correspond à votre environnement de déploiement.

Installation avec astro add

Titre de la section Installation avec astro add

Vous pouvez ajouter n’importe lequel des adaptateurs officiels maintenus par Astro avec la commande astro add suivante. Cela installera l’adaptateur et apportera les changements appropriés à votre fichier astro.config.mjs en une seule étape.

Par exemple, pour installer l’adaptateur Vercel, exécutez :

Fenêtre de terminal
npx astro add vercel

Installation manuelle

Titre de la section Installation manuelle

Vous pouvez également ajouter un adaptateur manuellement en installant le paquet et en mettant à jour astro.config.mjs vous-même.

Par exemple, pour installer manuellement l’adaptateur Vercel :

  1. Installez l’adaptateur dans les dépendances de votre projet en utilisant votre gestionnaire de paquets préféré :

    Fenêtre de terminal
    npm install @astrojs/vercel

  2. Ajoutez l’adaptateur à l’importation et à l’exportation par défaut de votre fichier astro.config.mjs, ainsi que votre mode de sortie (output) désiré :

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import vercel from '@astrojs/vercel/serverless';
    

    export default defineConfig({
      output: 'server',
      adapter: vercel(),
    });

    Notez que les différents adaptateurs peuvent également avoir des paramètres de configuration différents. Lisez la documentation de chaque adaptateur, et appliquez toutes les options de configuration nécessaires à l’adaptateur que vous avez choisi dans astro.config.mjs

Configurer server ou hybrid

Titre de la section Configurer server ou hybrid

Pour activer le rendu à la demande, vous devez mettre à jour votre configuration output avec l’un des deux modes de rendu serveur.

Par exemple, pour configurer une application très dynamique où chaque page est rendue à la demande par défaut, ajoutez output: 'server' à votre configuration Astro :

astro.config.mjs
import { defineConfig } from 'astro/config';
import node from "@astrojs/node";


export default defineConfig({
  output: 'server',
  adapter: node({
    mode: "standalone"
  })
});

Accepter le pré-rendu en mode server

Titre de la section Accepter le pré-rendu en mode server

Pour une application dont le rendu est principalement effectué par le serveur et configuré comme output: server, ajoutez export const prerender = true à n’importe quelle page ou route pour pré-rendre une page statique ou un point de terminaison :

src/pages/mypage.astro
---
export const prerender = true;
// ...
---
<html>
  <!-- Page statique, pré-rendue ici... -->
</html>
src/pages/mypage.mdx
---
layout: '../layouts/markdown.astro'
title: 'Ma page'
---
export const prerender = true;


# Voici ma page statique, pré-rendue
src/pages/myendpoint.js
export const prerender = true;


export async function GET() {
  return new Response(
    JSON.stringify({
      message: `Voici mon point de terminaison statique`,
    }),
  );
}

Désactiver le pré-rendu en mode hybrid

Titre de la section Désactiver le pré-rendu en mode hybrid

Pour un site principalement statique configuré en mode output: hybrid, ajoutez export const prerender = false à tous les fichiers qui doivent être rendus par le serveur à la demande :

src/pages/randomnumber.js
export const prerender = false;


export async function GET() {
  let number = Math.random();
  return new Response(
    JSON.stringify({
      number,
      message: `Voici un numéro aléatoire : ${number}`,
    }),
  );
}

Fonctionnalités de rendu à la demande

Titre de la section Fonctionnalités de rendu à la demande

Streaming HTML

Titre de la section Streaming HTML

Avec le streaming HTML, un document est divisé en morceaux, envoyé sur le réseau dans l’ordre, et rendu sur la page dans cet ordre. En mode server ou hybrid, Astro utilise le streaming HTML pour envoyer chaque composant au navigateur au fur et à mesure qu’il les rend. Cela permet à l’utilisateur de voir votre HTML aussi rapidement que possible, bien que les conditions du réseau puissent ralentir le téléchargement de documents volumineux et que l’attente des données puisse bloquer le rendu de la page.

Méthode associée : Utilisation de la diffusion en continu pour améliorer les performances des pages

Cookies

Titre de la section Cookies

Dans les modes server et hybrid, une page ou un point de terminaison de l’API peut vérifier, définir, obtenir et supprimer des cookies.

L’exemple ci-dessous met à jour la valeur d’un cookie pour un compteur de pages vues :

src/pages/index.astro
---
let counter = 0


if (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>Counter = {counter}</h1>
</html>

Voir plus de détails sur Astro.cookies et le type AstroCookie dans la référence de l’API.

Response

Titre de la section 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 état de réponse et un texte d’état pour une page de liste de produits lorsque le produit n’existe pas :

src/pages/product/[id].astro
---
export const prerender = false; // Pas 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 = 'Aucun produit trouvé';
}
---
<html>
  <!-- Page ici... -->
</html>

Astro.response.headers

Titre de la section Astro.response.headers

Vous pouvez définir des en-têtes en utilisant l’objet Astro.response.headers :

src/pages/index.astro
---
Astro.response.headers.set('Cache-Control', 'public, max-age=3600');
---
<html>
  <!-- Page ici... -->
</html>

Renvoyer un objet Response.

Titre de la section Renvoyer un objet Response.

Vous pouvez également renvoyer un objet Response directement à partir de n’importe quelle page en utilisant l’affichage à la demande soit manuellement ou avec Astro.redirect.

L’exemple ci-dessous recherche un identifiant dans la base de données sur une page dynamique et soit il renvoie une erreur 404 quand le produit n’existe pas, soit il redirige l’utilisateur vers une autre page lorsque le produit n’est plus disponible, soit il affiche le produit :

src/pages/[id].astro
---
export const prerender = false; // Pas 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: 'Non trouvé'
  });
}


// Le produit n'est plus disponible
if (!product.isAvailable) {
  return Astro.redirect("/products", 301);
}
---
<html>
  <!-- Page ici... -->
</html>

Request

Titre de la section 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.

En mode server et hybrid, 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

Titre de la section Astro.request.headers

Les en-têtes de la requête sont disponibles dans Astro.request.headers. Cela fonctionne comme la propriété Request.headers du navigateur. Il s’agit d’un objet Headers dans lequel vous pouvez récupérer des en-têtes tels que le cookie.

src/pages/index.astro
---
const cookie = Astro.request.headers.get('cookie');
// ...
---
<html>
  <!-- Page ici... -->
</html>

Astro.request.method

Titre de la section Astro.request.method

La méthode HTTP utilisée dans la requête est disponible sous la forme Astro.request.method. Cela fonctionne comme la méthode Request.method du navigateur. Elle renvoie la représentation sous forme de chaîne de la méthode HTTP utilisée dans la requête.

src/pages/index.astro
---
console.log(Astro.request.method) // GET (lors de la navigation dans le navigateur)
---

Voir plus de détails à propos de Astro.request dans la référence de l’API.

Points de terminaison du serveur

Titre de la section Points de terminaison du serveur

Un point de terminaison serveur, également connu sous le nom de route API, est une fonction spéciale exportée à partir d’un fichier .js ou .ts dans le dossier src/pages/. Une caractéristique puissante du rendu à la demande côté serveur, les routes 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 une réponse.

Pour en savoir plus, consultez notre Guide des points de terminaison.

Contribuer

Comment pouvons-nous vous aider ?

Créer une issue GitHub

Le moyen le plus rapide d'alerter notre équipe d'un problème.

Communauté