Episodio 10: La gran misión previa al renderizado: la búsqueda de Arin por un dominio personalizado de SSR y SSG

Las Bóvedas Estáticas del Codex brillaban con silenciosa anticipación. Estas bóvedas eran los guardianes silenciosos del conocimiento, con sus paredes revestidas de pergaminos de datos y páginas brillantes que esperaban la convocatoria de los Usuarios. Hoy, Arin se encontraba en el umbral de estas bóvedas, con la tarea de dominar un oficio nuevo y esencial: crear páginas estáticas pre-renderizadas que ayudarían a Codex a servir a sus usuarios más rápido que nunca.

“Arin”, La voz del Capitán Lifecycle resonó a través de la cámara abovedada, atrayendo su atención. “Hoy aprenderás a aprovechar el poder del renderizado estático. No se trata sólo de conocimiento, sino de preparar el Codex para satisfacer las necesidades de los usuarios incluso antes de que surjan”.

Un desafío digno de un verdadero defensor, pensó Arin, con determinación iluminando sus ojos. Era hora de diseñar un sistema que permitiera al Codex renderizar previamente sus páginas, garantizando una respuesta instantánea cuando fuera necesario.

1. Elaboración de archivos: creación de SSG personalizados con MDX

El Capitán Lifecycle caminó junto a Arin mientras ella se adentraba más en las Bóvedas. Pergaminos iluminados con datos, que revelan scripts y páginas renderizadas mucho antes de que un Usuario las necesitara. “Para preparar el Codex, debemos aprender a capturar el conocimiento y almacenarlo en estas páginas”, dijo.

La tarea de Arin era clara: construir un sistema de generación de sitios estáticos (SSG) para el blog del Codex, donde las historias y lecciones del pasado pudieran ser convocadas en cualquier momento.

Paso 1: Reunir las herramientas
El primer paso fue equipar al Codex con los medios para leer y compilar sus pergaminos: archivos MDX.

npm install fs-extra react react-dom react-dom/server @mdx-js/react @mdx-js/mdx

La cámara zumbó suavemente cuando Arin activó los componentes. Cada instalación era como una runa grabada en la infraestructura de la bóveda, preparándola para interpretar y representar los textos antiguos.

Paso 2: Escribir el primer desplazamiento MDX
Arin tomó una pluma y comenzó a redactar el primer blog de Codex, una historia de su historia tejida con componentes interactivos de React.

// blogs/hello-world.mdx
# Hello, World!

Welcome to Codex’s first blog post. This content is rendered from an MDX file, combining the simplicity of Markdown with the power of React components.

This is a special React component embedded within MDX!

Con cada trazo, la página brillaba y su contenido ahora era una combinación de texto simple y componentes complejos.

Paso 3: Crear el script para renderizar los pergaminos
Arin creó un hechizo (un script) que leería los pergaminos, los compilaría en componentes de React y los representaría como HTML estático.

// generateStaticBlogs.js
const fs = require('fs-extra');
const path = require('path');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { MDXProvider } = require('@mdx-js/react');
const mdx = require('@mdx-js/mdx');

const outputPath = './static-blogs';
const blogPath = './blogs';

(async () => {
  try {
    // Ensure the output directory exists
    await fs.ensureDir(outputPath);

    const blogFiles = await fs.readdir(blogPath);
    for (const file of blogFiles) {
      if (path.extname(file) === '.mdx') {
        const filePath = path.join(blogPath, file);
        const content = await fs.readFile(filePath, 'utf8');
        const compiledMdx = await mdx(content);
        const Component = new Function('React', compiledMdx)(React);

        // Render the component to a static HTML string
        const renderedBlog = ReactDOMServer.renderToString(
          
            
          
        );

        const htmlTemplate = `
          
          
            
              
              
              
            
            
              




Step 4: Running the Spell

Arin murmured the incantation to invoke the script.



node generateStaticBlogs.js




Observó cómo las Bóvedas Estáticas cobraban vida, cada blog brillaba suavemente mientras se transformaba en una página estática lista para ser entregada a los Usuarios.

El reflejo de Arin:

“Estas páginas estáticas son más que simples ecos”, pensó, mirando las bóvedas brillar con conocimiento. “Son la disposición del Codex para servir, instantánea e inquebrantable.”



  
  
  2. Los pros y los contras de la preparación estática


La voz del Capitán Lifecycle cortó el aire. “Recuerda, Arin, si bien las páginas estáticas son poderosas, tienen sus propias compensaciones”.

Ventajas:



Tiempos de carga ultrarrápidos: las páginas renderizadas previamente se publican instantáneamente, lo que brinda a los usuarios la ilusión de una velocidad perfecta.

Dominio del SEO: HTML completamente renderizado garantiza que las historias del Codex estén bien indexadas y ganen visibilidad.

Apto para desarrolladores: MDX permite que los componentes enriquecidos de React convivan con Markdown, combinando simplicidad con interactividad.


Contras:



Reconstrucciones: Las páginas del Codex deben reconstruirse para recibir actualizaciones, lo que hace que el contenido dinámico sea más difícil de administrar.

Tiempo de compilación inicial: los archivos grandes de contenido pueden tardar en generarse.


“Es como crear un archivo, Arin”, dijo Captain Lifecycle, “uno que debe cuidarse y actualizarse a medida que se escriben nuevas historias”.



  
  
  3. Regeneración estática incremental: el guardián adaptativo


“Pero Capitán”, El ceño de Arin se frunció mientras pensaba, “¿y si Codex necesita actualizar sus historias sin reescribirlo todo?”

 El Capitán Lifecycle asintió. “Ahí es donde entra en juego la regeneración estática incremental. Es un guardián que actualiza el contenido según sea necesario, manteniendo las páginas actualizadas sin rehacer todo el archivo”.

Ejemplo de ISR programado con Node-Cron:

Para mantener las páginas actualizadas, Arin introdujo un hechizo guardián que se ejecutaría a intervalos establecidos.



npm install node-cron






const cron = require('node-cron');

cron.schedule('0 * * * *', () => {
  console.log('Regenerating static pages...');
  require('./generateStaticBlogs');
});

console.log('Scheduled ISR running every hour.');




La visión de Arin:

“Con ISR, Codex no sólo reacciona, sino que se adapta”, pensó, sintiendo una sensación de preparación. “Los Usuarios siempre encontrarán el Codex actualizado, preparado para guiarlos.”





  
  
  Conclusión: Más allá de la misión


 Las Bóvedas permanecían serenas y resplandecientes con el conocimiento que Arin había entretejido en ellas. El Capitán Lifecycle puso una mano sobre su hombro, el orgullo evidente en sus ojos. “Has aprendido a renderizar previamente la esencia del Codex. Pero recuerde, existen herramientas fuera de nuestro alcance que lo hacen aún más fácil”.

Arin asintió, entendiendo el camino a seguir. “Para Codex, para los Usuarios, nos preparamos, adaptamos y servimos siempre.”





  
  
  Nota importante para los lectores:


Los ejemplos proporcionados aquí son enfoques fundamentales para comprender SSR y SSG personalizados. Para aplicaciones de nivel de producción, busque marcos como Next.js, Remix y Astro que ofrecen soluciones optimizadas, seguras y escalables para el renderizado previo.