Episódio 10: A grande missão de pré-renderização – A busca de Arin por SSR personalizado e domínio de SSG

Os Cofres Estáticos do Codex brilhavam com uma antecipação silenciosa. Esses cofres eram os guardiões silenciosos do conhecimento, suas paredes revestidas com pergaminhos de dados e páginas brilhantes que aguardavam a convocação dos Usuários. Hoje, Arin estava no limiar desses cofres, com a tarefa de dominar uma arte nova e essencial: criar páginas estáticas pré-renderizadas que ajudariam a Codex a atender seus usuários mais rápido do que nunca.

“Arin,” A voz do Capitão Lifecycle ressoou pela câmara abobadada, atraindo seu foco. “Hoje, você aprenderá a aproveitar o poder da renderização estática. Não se trata apenas de conhecimento – trata-se de preparar o Codex para atender às necessidades dos usuários antes mesmo que elas surjam.”

Um desafio digno de um verdadeiro defensor, pensou Arin, com determinação iluminando seus olhos. Era hora de criar um sistema que permitisse ao Codex pré-renderizar suas páginas, garantindo resposta instantânea quando solicitado.

1. Elaborando os Arquivos – Construindo SSG Personalizado com MDX

Captain Lifecycle caminhou ao lado de Arin enquanto ela se aprofundava nos Vaults. Pergaminhos iluminados com dados, revelando scripts e páginas renderizadas muito antes de um usuário precisar deles. “Para preparar o Codex, devemos aprender a capturar o conhecimento e armazená-lo nessas páginas”, ele disse.

A tarefa de Arin era clara: construir um sistema de geração de sites estáticos (SSG) para o blog do Codex, onde as histórias e lições do passado pudessem ser convocadas a qualquer momento.

Etapa 1: Reunindo as ferramentas
O primeiro passo foi equipar o Codex com os meios para ler e compilar seus pergaminhos – arquivos MDX.

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

A câmara zumbiu suavemente quando Arin ativou os componentes. Cada instalação era como uma runa gravada na infraestrutura do cofre, preparando-o para interpretar e renderizar os textos antigos.

Etapa 2: Escrevendo o primeiro pergaminho MDX
Arin pegou uma pena e começou a escrever o primeiro blog do Codex, um conto de sua história tecido com componentes interativos do 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!

A cada traço, a página brilhava, seu conteúdo agora é uma mistura de texto simples e componentes complexos.

Etapa 3: Criando o script para renderizar os pergaminhos
Arin criou um feitiço – um script – que leria os pergaminhos, os compilaria em componentes React e os renderizaria 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




Ela observou os cofres estáticos ganharem vida, cada blog brilhando suavemente ao se transformar em uma página estática pronta para ser veiculada aos usuários.

Reflexão de Arin:

“Essas páginas estáticas são mais do que apenas ecos”, ela pensou, observando os cofres brilharem com conhecimento. “Eles são a prontidão do Codex para servir, instantânea e inabalável.”



  
  
  2. Os prós e contras da preparação estática


A voz do Capitão Lifecycle corta o ar. “Lembre-se, Arin, embora as páginas estáticas sejam poderosas, elas vêm com suas próprias vantagens.”

Prós:



Tempos de carregamento extremamente rápidos: as páginas pré-renderizadas são exibidas instantaneamente, dando aos usuários a ilusão de velocidade contínua.

Domínio de SEO: HTML totalmente renderizado garante que as histórias do Codex sejam bem indexadas, ganhando visibilidade.

Amigável ao desenvolvedor: MDX permite que componentes avançados do React vivam lado a lado com o Markdown, combinando simplicidade com interatividade.


Contras:



Reconstruções: as páginas do Codex devem ser reconstruídas para atualizações, tornando o conteúdo dinâmico mais difícil de gerenciar.

Tempo de criação inicial: Grandes arquivos de conteúdo podem levar algum tempo para serem gerados.


“É como criar um arquivo, Arin”, Captain Lifecycle disse, “um que deve ser cuidado e atualizado à medida que novas histórias são escritas.”



  
  
  3. Regeneração Estática Incremental – The Adaptive Keeper


“Mas capitão,” A sobrancelha de Arin franziu enquanto ela pensava, “e se o Codex precisar atualizar suas histórias sem reescrever tudo?”

 Capitão Lifecycle assentiu. “É aí que entra a regeneração estática incremental. É um guardião que atualiza o conteúdo conforme necessário, mantendo as páginas atualizadas sem refazer o arquivo inteiro.”

Exemplo de ISR agendado com Node-Cron:

Para manter as páginas atualizadas, Arin introduziu um feitiço de guardião que seria executado em intervalos definidos.



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.');




Insight de Arin:

“Com ISR, o Codex não apenas reage – ele se adapta”, ela pensou, sentindo uma sensação de prontidão. “Os Usuários sempre encontrarão o Codex atualizado, preparado para orientá-los.”





  
  
  Conclusão: além da missão


Os Vaults permaneciam serenos e brilhantes com o conhecimento de que Arin havia entrelaçado neles. O Capitão Lifecycle colocou a mão no ombro dela, com orgulho evidente em seus olhos. “Você aprendeu a pré-renderizar a essência do Codex. Mas lembre-se, existem ferramentas além do nosso domínio que tornam isso ainda mais fácil.”

Arin assentiu, entendendo o caminho a seguir. “Para o Codex, para os Usuários, nós preparamos, adaptamos e sempre atendemos.”





  
  
  Nota importante para leitores:


Os exemplos fornecidos aqui são abordagens fundamentais para entender SSR e SSG personalizados. Para aplicativos de nível de produção, procure estruturas como Next.js, Remix e Astro que oferecem soluções otimizadas, seguras e escaláveis ​​para pré-renderização.