Creación de una arquitectura simple para un blog

---
title: 'Two Forms of Pre-rendering'
date: '2020-01-01'
---
 
Next.js tiene dos formas de prerenderizado: **Generación Estática** y **Renderizado del Lado del Servidor (SSR)**. La diferencia está en **cuándo** se genera el HTML para una página.
 
- **Generación Estática** es el método de prerenderizado que genera el HTML en el **momento de compilación**. El HTML prerenderizado se _reutiliza_ en cada solicitud.
- **Renderizado del Lado del Servidor (SSR)** es el método de prerrenderizado que genera el HTML en **cada solicitud**.
 
Es importante destacar que Next.js te permite **elegir** qué forma de prerrenderizado usar para cada página. Puedes crear una aplicación Next.js "híbrida" usando Generación Estática para la mayoría de las páginas y Renderizado del Lado del Servidor para otras.

---
title: 'When to Use Static Generation v.s. Server-side Rendering'
date: '2020-01-02'
---
 
Recomendamos usar **Generación Estática** (con y sin datos) siempre que sea posible porque tu página puede construirse una vez y servirse desde una CDN, lo que la hace mucho más rápida que tener un servidor renderizando la página en cada solicitud.
 
Puedes usar Generación Estática para muchos tipos de páginas, incluyendo:
 
- Páginas de marketing
- Artículos de blog
- Listados de productos de e-commerce
- Ayuda y documentación
 
Debes preguntarte: "¿Puedo prerrenderizar esta página **antes** de la solicitud de un usuario?" Si la respuesta es sí, entonces deberías elegir Generación Estática.
 
Por otro lado, la Generación Estática **no** es una buena idea si no puedes prerrenderizar una página antes de la solicitud de un usuario. Tal vez tu página muestra datos actualizados frecuentemente, y el contenido cambia en cada solicitud.
 
En ese caso, puedes usar **Renderizado del Lado del Servidor (SSR)**. Será más lento, pero la página prerrenderizada siempre estará actualizada. O puedes omitir el prerrenderizado y usar JavaScript del lado del cliente para poblar los datos.

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() {
  // Obtener nombres de archivos en /posts
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map((fileName) => {
    // Eliminar ".md" del nombre del archivo para obtener el id
    const id = fileName.replace(/\.md$/, '');
 
    // Leer archivo markdown como string
    const fullPath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');
 
    // Usar gray-matter para analizar la sección de metadatos
    const matterResult = matter(fileContents);
 
    // Combinar los datos con el id
    return {
      id,
      ...matterResult.data,
    };
  });
  // Ordenar artículos por fecha
  return allPostsData.sort((a, b) => {
    if (a.date < b.date) {
      return 1;
    } else {
      return -1;
    }
  });
}