Pourquoi et comment j'ai choisi Astro pour ce blog technique

Lorsqu’on est développeur et qu’on souhaite tenir un blog technique, on se retrouve souvent face à un dilemme :

1. Utiliser une plateforme tierce (Medium, Dev.to, Substack) : rapide à mettre en place, mais personnalisation très limitée, dépendance à un tiers et aucun contrôle sur son nom de domaine.
2. Utiliser un CMS lourd (WordPress) : flexible mais nécessite de la maintenance, des mises à jour de sécurité continuelles et souffre souvent de lenteurs.
3. Coder sa propre solution en Single Page Application (SPA) avec Next.js, Nuxt ou SvelteKit : puissant, mais charge souvent des dizaines de kilo-octets de JavaScript pour afficher du simple texte statique.

C’est là qu’Astro change la donne.

Qu’est-ce qui rend Astro différent ?

Le principe fondamental d’Astro est l’Island Architecture (architecture en îlots).

Par défaut, Astro compile vos pages en HTML et CSS purs. Absolument aucun JavaScript n’est envoyé au navigateur pour afficher vos articles, vos titres ou vos images.

---
// Ce code s'exécute UNIQUEMENT au moment du build (ou sur le serveur)
const articles = await getCollection('blog');
---

<div class="grid gap-6">
  {articles.map((post) => (
    <article class="p-6 rounded-xl border border-primary/20 bg-white">
      <h3 class="text-xl font-serif font-bold">{post.data.title}</h3>
      <p class="text-slate-600">{post.data.description}</p>
    </article>
  ))}
</div>

Si vous avez besoin d’un composant interactif (par exemple une calculatrice, un filtre dynamique ou une démo interactive), vous pouvez insérer un composant React, Vue ou Svelte avec la directive client:load ou client:visible. Seul le composant ciblé chargera son JavaScript.

La coloration syntaxique : Adieu les bibliothèques JS côté client

Sur beaucoup de blogs techniques, des librairies comme Prism.js ou Highlight.js sont chargées dans le navigateur du lecteur pour colorer le code à l’exécution. Cela crée un léger décalage visuel (flash) et ralentit le processeur sur mobile.

Astro utilise Shiki directement pendant la génération statique. Le HTML produit contient déjà les couleurs exactes de votre thème VS Code favori :

// Exemple de fonction TypeScript typée
interface Project {
  name: string;
  url: string;
  tags: string[];
}

function displayProject(project: Project): void {
  console.log(`Projet : ${project.name} - URL : ${project.url}`);
}

Les Content Collections : la sécurité du typage

L’un des plus grands atouts d’Astro réside dans les Content Collections. Grâce à Zod, chaque article en Markdown est validé au build :

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

export const collections = {
  blog: defineCollection({
    loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
    schema: z.object({
      title: z.string(),
      description: z.string(),
      pubDate: z.coerce.date(),
      tags: z.array(z.string()).default([]),
      featured: z.boolean().default(false),
    }),
  }),
};

Si par inadvertance vous oubliez une date ou si un tag n’est pas au bon format dans votre fichier Markdown, la compilation s’arrête avec un message d’erreur clair et précis.

Conclusion

Pour un site vitrine et un blog technique, Astro offre le meilleur compromis moderne :

• 100/100 sur Google Lighthouse sans effort d’optimisation complexe.
• Un confort d’écriture incomparable en Markdown / MDX.
• Un déploiement universel (fichiers HTML statiques que vous pouvez héberger chez n’importe quel hébergeur avec votre nom de domaine).