Astro 5 : Le guide complet pour créer des sites ultra-rapides

Astro 5 vient de sortir et apporte son lot de nouveautés excitantes. Si vous cherchez à créer des sites web ultra-performants, ce guide est fait pour vous.

Pourquoi Astro ?

Astro adopte une approche “Island Architecture” révolutionnaire : par défaut, votre site n’envoie aucun JavaScript au navigateur. Les composants interactifs sont chargés uniquement quand nécessaire.

Les chiffres parlent d’eux-mêmes

Métrique	Site classique	Site Astro
JavaScript initial	200-500 KB	0 KB
Time to Interactive	3-5s	< 1s
Lighthouse Score	60-80	95-100

Nouveautés d’Astro 5

1. Content Collections améliorées

La gestion du contenu devient encore plus puissante :

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()),
    image: z.object({
      src: z.string(),
      alt: z.string(),
    }).optional(),
  }),
});

export const collections = {
  blog: blogCollection,
};

2. View Transitions natives

Les transitions entre pages sont maintenant intégrées :

---
// src/layouts/BaseLayout.astro
import { ViewTransitions } from 'astro:transitions';
---

<html>
  <head>
    <ViewTransitions />
  </head>
  <body>
    <slot />
  </body>
</html>

Résultat : des navigations fluides façon SPA sans le poids d’un framework JavaScript.

3. Image optimization améliorée

Le composant <Image /> gère automatiquement :

Formats modernes (WebP, AVIF)
Dimensions responsives
Lazy loading natif
Placeholder blur

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Image
  src={heroImage}
  alt="Hero image"
  widths={[400, 800, 1200]}
  sizes="(max-width: 800px) 100vw, 800px"
/>

Architecture recommandée

Voici la structure de projet recommandée chez Kodixar :

src/
├── content/
│   ├── blog/
│   │   └── fr/
│   │       └── mon-article.mdx
│   └── config.ts
├── pages/
│   ├── index.astro
│   └── blog/
│       ├── index.astro
│       └── [slug].astro
├── layouts/
│   └── BaseLayout.astro
├── components/
│   ├── ui/           # Composants génériques
│   ├── sections/     # Sections de page
│   └── blog/         # Composants blog
├── styles/
│   └── globals.css
└── i18n/
    ├── ui.ts
    └── fr.json

Intégrations essentielles

Tailwind CSS

npx astro add tailwind

Configuration optimale :

// tailwind.config.mjs
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
};

MDX pour le contenu riche

npx astro add mdx

Vous pouvez maintenant utiliser des composants dans vos articles :

---
title: "Mon article"
---

import Callout from '../../components/Callout.astro';

# Introduction

<Callout type="tip">
  Astuce pro : utilisez MDX pour du contenu interactif !
</Callout>

Performance : les résultats

Un site Astro bien configuré atteint facilement :

Lighthouse Performance : 100/100
First Contentful Paint : < 500ms
Time to Interactive : < 1s
Total Blocking Time : 0ms

Déploiement

Build statique

npm run build
# Output dans dist/

Avec adaptateurs

Pour du SSR, ajoutez un adaptateur :

# Pour Vercel
npx astro add vercel

# Pour Cloudflare
npx astro add cloudflare

# Pour Node.js
npx astro add node

Conclusion

Astro 5 consolide sa position comme le meilleur framework pour les sites axés sur le contenu. Sa philosophie “zero JS by default” et ses performances exceptionnelles en font un choix évident pour :

Sites vitrines
Blogs
Documentation
E-commerce léger
Landing pages

Recommandation : Si la performance est votre priorité, Astro devrait être votre premier choix.

Dans un prochain article, on verra comment intégrer des composants React ou Vue pour les parties interactives de votre site.