Architecture headless avec Astro et Directus
Comment construire une architecture headless moderne en découplant le frontend Astro du CMS Directus, pour un maximum de flexibilité et de performance.
Pourquoi l'architecture headless ?
L'architecture headless sépare le frontend (Astro) du backend CMS (Directus). Le CMS gère uniquement les données via une API REST ou GraphQL, tandis qu'Astro se charge du rendu et de l'expérience utilisateur.
Cette approche offre plusieurs avantages majeurs :
- Liberté technologique : changer de CMS sans toucher au frontend
- Performance : Astro génère du HTML statique ou SSR ultra-rapide
- Scalabilité : le CMS et le frontend scalent indépendamment
Directus comme backend headless
Directus est particulièrement bien adapté car il génère automatiquement une API REST complète depuis votre modèle de données. Créez une collection posts, et vous obtenez immédiatement /items/posts sans écrire une ligne de code backend.
s // src/lib/directus.ts export async function getPosts(): Promise<Post[]> { const res = await fetch(${BASE_URL}/items/posts?filter[status][_eq]=published); const json = await res.json(); return json?.data ?? []; }
Astro en mode SSR
Avec output: 'server' dans stro.config.mjs, chaque requête page fetche les données fraîches depuis Directus. Pas de rebuild nécessaire quand le contenu change.
js export default defineConfig({ output: 'server', adapter: node({ mode: 'standalone' }), });
Le meilleur des deux mondes
En combinant Astro Islands et le SSR, vous pouvez avoir des pages quasi-statiques avec des îlots d'interactivité React hydratés côté client — comme le BlobHand ou l'InlineChat de ce boilerplate.