Rendu côté serveur

Le rendu côté serveur, aka SSR (De l’anglais, “Server-Side Rendering”), peut-être activé dans Astro. Lorsque vous l’activez, vous pouvez :

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

Le mode SSR est nouveau dans Astro et sera sujet à de nombreux changements avant que la version 1.0 ne sorte. Gardez votre code à jour avec les derniers changements d’API ici.

Activation du mode SSR dans votre projet

Section titled Activation du mode SSR dans votre projet

Pour activer le mode SSR, vous devez utiliser un adaptateur. Les adaptateurs suivants sont disponibles aujourd’hui avec d’autres à venir dans le futur :

Dans cet exemple, nous allons utiliser @astrojs/netlify pour construire avec Netlify. Pour cela, installez l’adaptateur :

Terminal window
npm install --save-dev @astrojs/netlify

Une fois que vos packages ont été installés, ajoutez ces deux lignes à votre fichier de configuration astro.config.mjs du projet.

astro.config.mjs
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/functions';


export default defineConfig({
  adapter: netlify(),
});

Avec Netlify, vous pouvez déployer depuis git, leur interface web, ou depuis leur ILC (ou CLI en anglais). Ici, nous allons utiliser l’ILC de Netlify pour le déployer.

D’abord, construisez votre site comme d’habitude :

Terminal window
npm run build

Ceci crée netlify/functions/ qui contient le code pour votre SSR. Le déploiement de votre site le déploiera ces fonctions qui contiennent toutes vos composants de Pages Astro prêtes à être rendues.

Terminal window
netlify deploy

Après le déploiement, vous devriez obtenir une URL pour prévisualiser votre site.

Fonctionnalités

Section titled Fonctionnalités

Astro restera un générateur de sites statiques par défaut, mais une fois que vous activez un adaptateur pour le rendu côté serveur, quelques nouvelles fonctionnalités deviennent disponibles pour vous.

Astro.request.headers

Section titled Astro.request.headers

Les en-têtes de la requête sont disponibles dans Astro.request.headers. C’est un objet Headers où vous pouvez récupérer les en-têtes tels que les cookies.

...
---
const cookie = Astro.request.headers.get('cookie');
---
<html>
  <!-- Contenu de votre page ici... -->
</html>

Astro.redirect

Section titled Astro.redirect

Sur la variable globale Astro, cette méthode vous permet de rediriger vers une autre page. Vous pourriez le faire après avoir vérifié si l’utilisateur est connecté en récupérant sa session depuis un cookie.

---
import { isLoggedIn } from '../utils';


const cookie = Astro.request.headers.get('cookie');


// Si l'utilisateur n'est pas connecté, redirigez-le vers la page de connexion.
if(!isLoggedIn(cookie)) {
  return Astro.redirect('/login');
}
---
<html>
  <!-- Contenu de votre page ici... -->
</html>

Response

Section titled Response

Vous pouvez aussi retourner une Réponse depuis n’importe quelle page. Vous pourriez le faire pour retourner une erreur 404 sur une page dynamique après avoir vérifié un identifiant dans la base de données.

[id].astro

---
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'
  });
}
---
<html>
  <!-- Contenu de votre page ici... -->
</html>

Routes API

Section titled Routes API

Une route API est un fichier .js ou .ts dans le dossier src/pages/ qui prend une Requête et retourne une Réponse.

[id].js

import { getProduct } from '../db';


export async function get({ params }) {
  const { id } = params;
  const product = await getProduct(id);


  if(!product) {
    return new Response(null, {
      status: 404,
      statusText: 'Not found'
    });
  }


  return new Response(JSON.stringify(product), {
    status: 200
  });
}