Server Islands Astro 5 : tutoriel pratique 2026

Server Islands sont la fonctionnalité phare d’Astro 5. Elles résolvent un problème récurrent : comment garder les bénéfices d’un site essentiellement statique (perf, SEO, coût hébergement bas) tout en injectant des fragments dynamiques personnalisés (panneau utilisateur, dernier prix, panier, statut commande) sans tout passer en SSR ? Voici le tutoriel complet pour utiliser Server Islands en 2026.

Voir notre guide complet Astro 5.

Le problème résolu

Avant Astro 5, vous aviez deux choix : page statique (zéro perso) ou page SSR complète (latence serveur sur chaque requête, pas de CDN cache). Server Islands offrent un mode hybride : la page principale reste statique servie depuis le CDN (rapide, économique), et seuls certains composants sont rendus côté serveur à la demande.

Cas d’usage typiques

• Header avec « Bonjour, [nom utilisateur] » personnalisé
• Bouton panier avec badge nombre d’articles
• Liste de produits récemment vus
• Statut commande dans page profil
• Notifications non lues
• A/B testing avec variant choisi côté serveur
• Contenu géo-localisé (Dakar vs Abidjan)

Étape 1 — Activer SSR hybride

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

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

Pour Cloudflare Pages : adaptateur @astrojs/cloudflare. Pour Coolify avec Bun : adaptateur @astrojs/node + Dockerfile.

Étape 2 — Créer un Server Island

---
// src/components/UserGreeting.astro
const cookie = Astro.cookies.get("session");
let username = null;
if (cookie?.value) {
  username = await getUserFromSession(cookie.value);
}
---

{username ? (
  <p>Bonjour, {username} 👋</p>
) : (
  <a href="/login">Se connecter</a>
)}

Étape 3 — Utiliser avec server:defer

---
// src/pages/index.astro (page essentiellement statique)
import Layout from "../layouts/Base.astro";
import UserGreeting from "../components/UserGreeting.astro";
import Skeleton from "../components/Skeleton.astro";
---

<Layout title="Accueil">
  <h1>Bienvenue sur ITSkillsCenter</h1>
  
  <!-- Cette section est différée : la page se charge en statique
       puis l'island est récupérée via fetch et injectée -->
  <UserGreeting server:defer>
    <Skeleton slot="fallback" />
  </UserGreeting>
  
  <p>Reste de la page statique...</p>
</Layout>

Le visiteur voit immédiatement la page complète avec un Skeleton à la place du composant Server Island. Quelques millisecondes plus tard, le serveur retourne le rendu et Astro l’injecte. Pas de hydratation JS.

Étape 4 — Cache personnalisé

---
// Cache-Control sur les Server Islands
Astro.response.headers.set(
  "Cache-Control",
  "private, max-age=60"
);
---

Sur un Server Island contenant le panier, vous pouvez mettre du cache 30s (acceptable pour l’utilisateur). Sur des îles globales (top trending), du cache plus long (5 min).

Étape 5 — Encrypted props

Astro 5 chiffre automatiquement les props passés aux Server Islands. Critique pour la sécurité : l’utilisateur ne peut pas modifier les props pour exécuter avec d’autres paramètres.

// astro.config.mjs : clef de chiffrement (auto-générée si absente)
export default defineConfig({
  output: "server",
  experimental: {
    serverIslands: true,  // selon version
  },
});

Étape 6 — Quand ne PAS utiliser Server Islands

• Si la totalité de la page change selon utilisateur → préférer SSR pleine page
• Si vous avez besoin d’interactivité côté client (formulaire, état) → Client Islands classiques (client:load)
• Si vos données changent en temps réel à chaque seconde → WebSocket et state client

Performance attendue

• HTML initial servi en ~50 ms depuis CDN edge (Cloudflare Lagos)
• Server Island fetched en parallèle, ~150-300 ms si serveur Helsinki
• Pas de blocage du rendu de la page principale
• Lighthouse Performance reste 95+ sur les pages avec 1-2 islands

Adaptation Afrique de l’Ouest

Server Islands sont parfaits pour les sites qui mêlent contenu marketing (statique, servi depuis edge Cloudflare proche d’un visiteur sénégalais) et fragments dynamiques (statut compte, panier, prix). Vous gardez la rapidité d’un site statique sans sacrifier la personnalisation.

Erreurs fréquentes

Pour aller plus loin

• Guide complet Astro 5
• Content Collections Astro 5
• Déployer Astro
• Documentation Server Islands : docs.astro.build