Les Fondamentaux d'Astro : Composants, Pages et Layouts

Bienvenue dans cette leçon dédiée aux piliers fondamentaux d'Astro ! Dans le cadre de notre cours "Maîtrisez Astro : Créez des Sites Web Ultra-Performants et SEO-Friendly avec l'Architecture en Îles", nous allons explorer les briques essentielles qui composent toute application Astro : les composants, les pages et les layouts. Comprendre leur rôle et leur interaction est crucial pour bâtir des sites web rapides, maintenables et évolutifs.

À la fin de cette leçon, vous saurez :

Distingué les composants Astro, leur syntaxe et leur utilité.
Comprendre le fonctionnement du routage basé sur les fichiers avec les pages Astro.
Appliquer les layouts pour créer des structures de pages réutilisables.
Voir comment ces trois concepts s'intègrent pour former l'architecture de votre site.

1. Introduction à l'Architecture en Îles d'Astro (Rappel Contextuel)

Avant de plonger dans les détails, rappelons la philosophie d'Astro. Au cœur d'Astro se trouve l'architecture en îles (Island Architecture). Cette approche vise à livrer le minimum de JavaScript au navigateur. Par défaut, tous vos composants Astro sont rendus côté serveur (ou au moment de la compilation) en HTML pur, sans JavaScript client. Seules les parties interactives de votre site (les "îles") chargent et hydratent le JavaScript nécessaire, et ce, de manière isolée.

C'est cette approche qui permet à Astro de générer des sites web ultra-performants avec un score Lighthouse exceptionnel. Les concepts de composants, pages et layouts que nous allons étudier sont tous conçus autour de cette idée de génération statique prioritaire.

2. Les Composants Astro : Les Briques de Construction (`.astro`)

Les composants sont le cœur de toute application web moderne. En Astro, un composant Astro est une brique d'interface utilisateur réutilisable qui combine HTML, CSS et JavaScript. Son extension de fichier est toujours .astro.

2.1. Structure d'un Composant Astro

Un fichier .astro est divisé en deux parties principales, séparées par des triples tirets --- (appelés "frontmatter") :

Le Script du Composant (Frontmatter) : C'est un bloc de JavaScript (ou TypeScript) situé en haut du fichier. Il est exécuté uniquement sur le serveur (ou à la compilation) et ne finit jamais dans le navigateur. C'est ici que vous importez d'autres composants, définissez des variables, traitez des données ou déclarez des props que le composant recevra.
Le Template HTML : C'est le balisage HTML (et le CSS) que le composant va rendre. Vous pouvez utiliser des expressions JavaScript (via des accolades {}) pour injecter dynamiquement des données depuis le script du composant.

---
// 1. Script du Composant (Frontmatter)
// Exécuté côté serveur/compilation, jamais dans le navigateur.
interface Props {
  titre: string;
  description: string;
}

const { titre, description } = Astro.props;

// On peut aussi importer d'autres composants ici :
// import MonAutreComposant from './MonAutreComposant.astro';
---
<!-- 2. Template HTML -->
<style>
  .card {
    border: 1px solid #ccc;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .card h3 {
    color: #333;
    margin-top: 0;
  }
  .card p {
    color: #666;
  }
</style>

<div class="card">
  <h3>{titre}</h3>
  <p>{description}</p>
  <!-- Les slots permettent d'injecter du contenu enfant -->
  <slot />
</div>

2.2. Les Props (Propriétés)

Les props sont le moyen de passer des données d'un composant parent à un composant enfant. Elles sont définies et typées dans le frontmatter (si vous utilisez TypeScript) et accessibles via Astro.props.

Dans l'exemple ci-dessus, titre et description sont des props.

2.3. Les Slots

Les slots (<slot />) sont un concept puissant qui permet à un composant de recevoir du contenu HTML "enfant" depuis son parent. C'est idéal pour créer des composants d'enveloppe ou des structures de base flexibles.

Slot par défaut : <slot /> insère tout le contenu enfant passé au composant.
Slots nommés : <slot name="nomDuSlot" /> permet d'insérer du contenu spécifiquement désigné par un attribut slot="nomDuSlot" dans le parent.

<!-- Utilisation du composant Card.astro avec props et slot -->
<Card titre="Ma Première Carte Astro" description="Ceci est une description pour ma carte.">
  <p>Contenu additionnel injecté via le slot par défaut.</p>
  <p>Par exemple, un lien ou une image.</p>
</Card>

2.4. Styles Scoped par Défaut

Les balises <style> dans les composants Astro sont automatiquement scoped (limitées) au composant. Cela signifie que les styles que vous définissez dans un composant n'affecteront pas les autres composants de votre application, prévenant ainsi les conflits CSS. Vous pouvez également utiliser des préprocesseurs CSS comme Sass ou Tailwind CSS.

3. Les Pages Astro : Les Routes de Votre Site (`src/pages/`)

Les pages Astro sont des composants .astro spéciaux (ou d'autres formats comme .md, .mdx) qui résident dans le répertoire src/pages/. Elles sont la fondation de la structure de votre site car elles définissent les routes de votre application. Astro utilise un système de routage basé sur les fichiers (File-based Routing).

3.1. Routage Basé sur les Fichiers

Chaque fichier placé dans src/pages/ devient automatiquement une route sur votre site web.

src/pages/index.astro -> / (Page d'accueil)
src/pages/about.astro -> /about
src/pages/blog/index.astro -> /blog
src/pages/blog/post-1.astro -> /blog/post-1

3.2. Routes Dynamiques

Astro prend également en charge les routes dynamiques, idéales pour générer des pages à partir de données (par exemple, des articles de blog ou des fiches produits).

src/pages/blog/[slug].astro -> Correspond à /blog/mon-super-article, /blog/un-autre-post, etc.

Dans le frontmatter de [slug].astro, vous pouvez utiliser la fonction getStaticPaths() pour générer statiquement toutes les pages possibles à partir de vos données.

---
// src/pages/blog/[slug].astro
import Card from '../../components/Card.astro'; // On peut importer nos composants

// Exemple pour une route dynamique
export async function getStaticPaths() {
  const posts = [
    { slug: 'mon-premier-article', title: 'Mon Premier Article', content: 'Voici le contenu du premier article.' },
    { slug: 'deuxieme-billet', title: 'Deuxième Billet de Blog', content: 'Un autre super contenu pour le blog.' },
  ];

  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
---
<!-- src/pages/blog/[slug].astro -->
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{post.title}</title>
</head>
<body>
  <header>
    <h1>{post.title}</h1>
    <a href="/blog">Retour aux articles</a>
  </header>
  <main>
    <Card titre={post.title} description="Article de blog">
      <p>{post.content}</p>
    </Card>
  </main>
</body>
</html>

3.3. Utilisation des Composants dans les Pages

Les pages sont les "assembleurs" de votre site. C'est là que vous importez et arrangez vos composants pour construire l'interface utilisateur spécifique à chaque route.

---
// src/pages/index.astro
import Card from '../components/Card.astro'; // Importez votre composant Card
---
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accueil - Mon Super Site Astro</title>
  <link rel="stylesheet" href="/global.css"> <!-- Liaison à un fichier CSS global -->
</head>
<body>
  <header>
    <h1>Bienvenue sur notre site Astro !</h1>
    <nav>
      <a href="/">Accueil</a>
      <a href="/about">À Propos</a>
      <a href="/blog">Blog</a>
    </nav>
  </header>

  <main>
    <h2>Nos Derniers Articles</h2>
    <Card titre="Astro en action" description="Découvrez comment Astro transforme le développement web.">
      <p>Lisez notre guide détaillé sur les performances d'Astro.</p>
      <a href="/blog/mon-premier-article">Lire la suite</a>
    </Card>

    <Card titre="Les Îles d'Astro" description="Comprendre l'architecture en îles pour une meilleure UX.">
      <p>Un article approfondi sur l'hydratation partielle.</p>
      <a href="/blog/deuxieme-billet">En savoir plus</a>
    </Card>
  </main>

  <footer>
    <p>&copy; 2023 Mon Site Astro</p>
  </footer>
</body>
</html>

4. Les Layouts Astro : Structures de Pages Réutilisables (`src/layouts/`)

Les layouts sont des composants Astro spéciaux conçus pour fournir une structure de page cohérente et réutilisable à travers plusieurs pages. Ils vivent généralement dans le répertoire src/layouts/. Imaginez un layout comme un "squelette" qui définit les éléments communs à toutes vos pages, tels que l'en-tête, le pied de page, la navigation, ou même la structure HTML de base (<html>, <head>, <body>).

4.1. Pourquoi utiliser les Layouts ?

Réutilisabilité : Évitez de répéter le même balisage HTML (comme le DOCTYPE, <html>, <head>, <body>, le header et le footer) sur chaque page.
Cohérence : Assurez une apparence et une structure uniformes sur l'ensemble de votre site.
Maintenance facilitée : Modifier un élément global (par exemple, le menu de navigation) ne nécessite qu'une modification dans le layout, et non dans chaque page individuelle.

4.2. Création d'un Layout de Base

Un layout est un composant Astro normal, mais il utilise intensivement le <slot /> pour insérer le contenu spécifique de la page qu'il enveloppe.

---
// src/layouts/BaseLayout.astro
interface Props {
  title: string;
  description?: string; // Description optionnelle pour le SEO
}

const { title, description = "Un site web ultra-performant créé avec Astro." } = Astro.props;
---
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{title} | Mon Site Astro</title>
  <meta name="description" content={description}>
  <link rel="stylesheet" href="/global.css"> <!-- Styles globaux -->
</head>
<body>
  <header>
    <nav>
      <a href="/">Accueil</a>
      <a href="/about">À Propos</a>
      <a href="/blog">Blog</a>
    </nav>
  </header>

  <main>
    <!-- Le contenu de la page enveloppée sera inséré ici -->
    <slot />
  </main>

  <footer>
    <p>&copy; 2023 Mon Site Astro</p>
  </footer>
</body>
</html>

4.3. Utilisation d'un Layout dans une Page

Pour utiliser un layout, il suffit de l'importer dans votre page Astro et d'envelopper le contenu de la page avec ce layout. Le contenu enveloppé sera automatiquement inséré dans le <slot /> du layout.

---
// src/pages/about.astro
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="À Propos de Nous" description="En savoir plus sur notre mission et notre équipe.">
  <h2>Qui sommes-nous ?</h2>
  <p>Nous sommes une équipe passionnée dédiée à la création de sites web rapides et modernes avec Astro.</p>
  <p>Notre mission est de rendre le web plus rapide et plus accessible pour tous.</p>
</BaseLayout>

Remarquez comment la page about.astro est beaucoup plus concise grâce à l'utilisation du BaseLayout. Le titre et la description sont passés comme des props au layout, et le contenu spécifique de la page est placé à l'intérieur du layout.

4.4. Nesting de Layouts

Vous pouvez imbriquer des layouts pour des structures plus complexes. Par exemple, un BlogLayout pourrait utiliser un BaseLayout et ajouter des éléments spécifiques aux pages de blog (comme une barre latérale avec les articles récents).

5. Intégration et Synergie

Les composants, pages et layouts ne sont pas des entités isolées ; ils travaillent en synergie pour construire votre site Astro :

Les Composants sont les plus petites unités, réutilisables, qui encapsulent leur propre logique et style. Ils peuvent être utilisés n'importe où.
Les Pages définissent les routes de votre site. Elles importent et arrangent les composants pour créer l'interface spécifique à une URL donnée.
Les Layouts fournissent une structure d'enveloppe commune pour les pages ou même d'autres composants, garantissant la cohérence et réduisant la duplication de code.

Cette architecture modulaire, combinée à la philosophie de l'architecture en îles d'Astro, permet de construire des sites web avec une grande flexibilité, une excellente maintenabilité et des performances de chargement exceptionnelles.

6. Conclusion et Prochaines Étapes

Félicitations ! Vous avez maintenant une compréhension solide des concepts fondamentaux d'Astro : les composants, les pages et les layouts. Vous avez vu comment ils sont structurés, comment ils interagissent et pourquoi ils sont essentiels à la création de sites Astro.

Points clés à retenir :

Les composants Astro (.astro) sont des briques UI réutilisables, rendues côté serveur par défaut. Ils utilisent le frontmatter pour la logique et des slots pour la flexibilité.
Les pages (src/pages/) définissent les routes de votre site grâce au routage basé sur les fichiers et servent d'assembleurs pour vos composants.
Les layouts (src/layouts/) sont des enveloppes structurelles qui garantissent la cohérence et la réutilisabilité du balisage HTML commun à travers vos pages.

Dans les prochaines leçons, nous approfondirons comment rendre ces composants interactifs avec des frameworks UI (comme React, Vue, Svelte) grâce aux directives client d'Astro, ce qui est le cœur de l'architecture en îles. Préparez-vous à écrire encore plus de code et à voir Astro en action !