Architecture headless avec Astro et Directus

## 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 { 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.