Depuis quelques années, le paysage des frameworks JavaScript s’est considérablement élargi. React, Vue, Next.js, Nuxt, SvelteKit… Les options ne manquent pas. Pourtant, pour les projets de sites vitrines et de blogs, nous avons fait un choix différent : Astro.
Un framework pensé pour le contenu
Astro part d’un constat simple : la majorité des sites web n’ont pas besoin d’envoyer des mégaoctets de JavaScript au navigateur. Un site vitrine, un portfolio, un blog, ce sont avant tout des pages statiques enrichies de quelques interactions.
Là où Next.js ou Nuxt génèrent des Single Page Applications hydratées côté client, Astro adopte une approche inverse. Par défaut, zéro JavaScript n’est envoyé au navigateur. Le HTML est généré au build, et les composants interactifs ne sont chargés que lorsqu’ils en ont besoin, grâce à un système appelé “Islands Architecture”.
Des performances imbattables sur le terrain
Sur le projet ISM Lausanne, nous avons obtenu un score Lighthouse de 98/100 en performance dès le premier déploiement. Aucune optimisation manuelle, aucun cache complexe à configurer. La génération statique fait le travail.
Pour les PME et les indépendants, cela se traduit concrètement par :
- Un chargement quasi-instantané sur mobile, même avec une connexion 4G moyenne
- Un meilleur positionnement sur Google grâce aux Core Web Vitals au vert
- Des coûts d’hébergement réduits : un site statique tient sur n’importe quel serveur
L’intégration avec les CMS modernes
Astro s’intègre parfaitement avec les Content Collections, son système natif de gestion de contenu basé sur des fichiers Markdown. Pour des projets comme le nôtre, c’est idéal : le contenu est versionné avec le code, modifiable directement, sans base de données à maintenir.
Pour les clients qui préfèrent une interface d’administration, Astro supporte nativement Sanity, Contentful, Strapi ou Decap CMS. Le meilleur des deux mondes.
Le multilinguisme sans douleur
L’un des défis récurrents de nos projets est le support de plusieurs langues. Avec notre configuration Astro, les routes /fr/, /en/, /de/ sont générées automatiquement à partir d’un seul fichier de traductions.
// Un appel, trois langues
export async function getStaticPaths() {
const langs = ['en', 'de'];
return langs.flatMap(lang =>
posts.map(post => ({ params: { lang, slug: post.slug }, props: { post } }))
);
}
Astro n’est pas pour tous les projets
Soyons honnêtes : Astro n’est pas la bonne réponse à tout. Pour une application web complexe avec authentification, état partagé et interactions riches, Next.js ou SvelteKit restent plus adaptés. C’est d’ailleurs la stack que nous utilisons pour des projets comme Basik Talents ou Média Formation.
Mais pour un site vitrine professionnel, un portfolio, ou un blog d’entreprise, Astro est notre standard. Rapide à développer, rapide à livrer, rapide pour l’utilisateur final.
Vous envisagez une refonte de votre site web ? Contactez-nous pour discuter de l’approche la mieux adaptée à vos besoins.