Création d'une architecture de blog simple

---
title: 'Deux formes de pré-rendu'
date: '2020-01-01'
---
 
Next.js propose deux formes de pré-rendu : **Génération statique** et **Rendu côté serveur**. La différence réside dans **le moment** où le HTML d'une page est généré.
 
- **La génération statique** est la méthode de pré-rendu qui génère le HTML au **moment de la construction**. Le HTML pré-rendu est ensuite _réutilisé_ à chaque requête.
- **Le rendu côté serveur** est la méthode de pré-rendu qui génère le HTML à **chaque requête**.
 
Il est important de noter que Next.js vous permet de **choisir** quelle forme de pré-rendu utiliser pour chaque page. Vous pouvez créer une application Next.js "hybride" en utilisant la génération statique pour la plupart des pages et le rendu côté serveur pour d'autres.

---
title: 'Quand utiliser la Génération Statique vs le Rendu Côté Serveur'
date: '2020-01-02'
---
 
Nous recommandons d'utiliser la **Génération Statique** (avec ou sans données) autant que possible, car votre page peut être construite une fois et servie par un CDN, ce qui la rend beaucoup plus rapide qu'un serveur qui rend la page à chaque requête.
 
Vous pouvez utiliser la Génération Statique pour de nombreux types de pages, notamment :
 
- Pages marketing
- Articles de blog
- Listes de produits e-commerce
- Aide et documentation
 
Vous devriez vous demander : "Puis-je pré-rendre cette page **avant** la requête d'un utilisateur ?" Si la réponse est oui, alors vous devriez choisir la Génération Statique.
 
D'un autre côté, la Génération Statique n'est **pas** une bonne idée si vous ne pouvez pas pré-rendre une page avant la requête d'un utilisateur. Peut-être que votre page affiche des données fréquemment mises à jour, et que le contenu de la page change à chaque requête.
 
Dans ce cas, vous pouvez utiliser le **Rendu Côté Serveur**. Ce sera plus lent, mais la page pré-rendue sera toujours à jour. Ou vous pouvez ignorer le pré-rendu et utiliser JavaScript côté client pour peupler les données.

npm install gray-matter

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
 
const postsDirectory = path.join(process.cwd(), 'posts');
 
export function getSortedPostsData() {
  // Obtenir les noms de fichiers sous /posts
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map((fileName) => {
    // Supprimer ".md" du nom de fichier pour obtenir l'id
    const id = fileName.replace(/\.md$/, '');
 
    // Lire le fichier markdown comme une chaîne
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');
 
    // Utiliser gray-matter pour analyser la section de métadonnées de l'article
    const matterResult = matter(fileContents);
 
    // Combiner les données avec l'id
    return {
      id,
      ...matterResult.data,
    };
  });
  // Trier les articles par date
  return allPostsData.sort((a, b) => {
    if (a.date < b.date) {
      return 1;
    } else {
      return -1;
    }
  });
}