Blog Slug

Type de ressource : Route Astro (Page SSG dynamique)
Fichier source : src/pages/blog/[...slug].astro
Statut : Actif

1. Vue d’ensemble

1.1. Description

Route dynamique pour les articles de blog individuels. Utilise getStaticPaths pour générer les chemins statiques et le layout BlogPost pour le rendu. Rend le contenu de l’article via Astro content collections.

1.2. Objectif

• Afficher les articles de blog individuels
• Utiliser SSG pour la génération statique des articles
• Utiliser le layout BlogPost pour la cohérence visuelle

1.3. Caractéristiques

Propriété	Valeur
URL publique	/blog/[slug]
Mode de rendu	SSG (getStaticPaths)
Type	Page HTML
Méthode HTTP	GET
Authentification requise	Non
Cache	Par défaut Cloudflare

2. Architecture et flux

[Requête utilisateur]
     │
     ▼
[Cloudflare Pages / Edge]
     │  • Routage vers Astro
     ▼
[Astro Route (blog/[...slug].astro)]
     │  • getStaticPaths (build time)
     │  • Récupération de l'article via props
     │  • Rendu du contenu via render()
     ▼
[Réponse HTML]

2.2. Composants impliqués

Composant	Rôle	Couche
blog/[...slug].astro	Définition de la route	L2 (Astro)
getStaticPaths()	Génération des chemins statiques	L2 (Astro)
BlogPost	Layout global	L2 (Astro)

3. Implémentation

3.1. Code de la route

---
import { type CollectionEntry, getCollection, render } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.id },
    props: post,
  }));
}
type Props = CollectionEntry<'blog'>;

const post = Astro.props;
const { Content } = await render(post);
---

<BlogPost {...post.data}>
  <Content />
</BlogPost>

4. Données et requêtes GROQ

4.1. Requête principale

Aucune requête GROQ n’est utilisée (Astro content collections).

4.2. Requêtes secondaires

Aucune requête secondaire n’est utilisée.

4.3. Types TypeScript associés

// Type CollectionEntry généré par Astro
export type CollectionEntry<TCollectionName> = {
  id: string;
  slug: string;
  body: string;
  collection: TCollectionName;
  data: {
    title: string;
    description: string;
    pubDate: Date;
    updatedDate?: Date;
    heroImage?: ImageMetadata;
  };
};

5. Paramètres et validation

5.1. Paramètres d’URL

Paramètre	Type	Obligatoire	Description	Validation
slug	string	✅	Identifiant de l’article	Généré par getStaticPaths

5.2. Query strings

Aucune query string n’est utilisée.

5.3. Gestion des erreurs

Code HTTP	Condition	Réponse
200	Succès	Page HTML
404	Slug invalide	Page 404 Astro par défaut

6. Stratégie de cache

6.1. En-têtes de cache

Mode	Cache-Control	CDN-Cache-Control	Rationale
SSG (build time)	Non configuré	Non configuré	Par défaut Cloudflare

6.2. Implémentation dans la route

Non implémenté - pas de headers de cache explicites.

7. SEO et métadonnées

7.1. Balises meta

Balise	Source	Fallback
<title>	post.data.title (via layout)	-
<meta name="description">	post.data.description (via layout)	-
Meta tags globaux	BaseHead (via layout)	-

7.2. Sitemap

• ✅ Cette route est-elle incluse dans le sitemap ? Oui
• ✅ Fréquence de mise à jour : weekly
• ✅ Priorité : 0.7

7.3. Indexation Pagefind

• ❌ Cette route est-elle indexée par Pagefind ? Non (Pagefind non configuré)

8. Composants UI utilisés

Composant	Fichier	Rôle	Hydratation
BlogPost	src/layouts/BlogPost.astro	Layout global	Aucune

9. Sécurité

9.1. Accès et authentification

Condition	Comportement
Accès public	Page accessible sans authentification

9.2. Validation des entrées

Non applicable (slug généré par getStaticPaths).

9.3. En-têtes de sécurité

Non implémenté dans cette route (à configurer via Middleware Cloudflare).

10. Débogage et troubleshooting

10.1. Problèmes courants

Symptôme	Cause probable	Solution
Page 404	Slug invalide	Vérifier que l’article existe dans src/content/blog/
Build warning	getStaticPaths sans prerender	Ajouter export const prerender = true (non nécessaire en SSR)

10.2. Logs et monitoring

# Logs de build
npm run build -- --verbose

# Vérification des types
npx astro check

10.3. Tests manuels

# Test de la route en local
curl -I http://localhost:4321/blog/[slug]

11. Bonnes pratiques

11.1. Architecture

• ✅ Utilisation de getStaticPaths pour la génération statique
• ✅ Utilisation du layout BlogPost pour la cohérence
• ✅ Rendu du contenu via render()

11.2. Performance

• ✅ SSG pour le rendu statique
• ✅ Pas de JavaScript inutile

11.3. Maintenance

• ✅ Ajouter des articles dans src/content/blog/
• ✅ Rebuild nécessaire pour les nouveaux articles

12. Évolutions et roadmap

12.1. Améliorations planifiées

• Support du mode preview
• Indexation Pagefind
• Structured data (JSON-LD) pour les articles

12.2. Limitations connues

• ❌ Pas de support du mode preview
• ❌ Pas d’indexation Pagefind
• ❌ Pas de structured data (JSON-LD)
• ⚠️ Build warning : getStaticPaths ignoré sans prerender explicit

13. Ressources liées

• Documentation Astro : Routing
• Documentation Astro : getStaticPaths
• Documentation Astro : Content Collections
• Fichiers concernés :
  • src/pages/blog/[...slug].astro
  • src/layouts/BlogPost.astro
  • src/content/blog/

14. Historique des modifications

Date	Version	Description	Auteur
2026-09-15	1.0	Création initiale	Devin