Renderização híbrida sem framework

Esta página não precisou de JavaScript para existir. O texto que você está lendo foi gerado no build, virou um arquivo .html de verdade e chegou ao seu navegador pronto. Nenhum framework de SSG envolvido — só um script que lê Markdown e chama renderToStaticMarkup.

Por que isso importa

Um crawler que não executa JavaScript enxerga este texto. Um bot de preview do WhatsApp, que também não executa nada, lê as meta tags og: do <head>. E a primeira pintura não espera bundle nenhum, porque não há bundle a esperar.

Onde entra o React, então

Só onde há interação de verdade. O bloco abaixo é uma ilha: um pedaço isolado da página onde o React monta, sob demanda. Se este post fosse só texto, a tag <script> nem seria incluída no HTML.

Declarar uma ilha é uma linha no Markdown:

<div data-island="CodePlayground" data-props='{"code":"console.log(1 + 1)"}'></div>

E registrá-la é uma linha no cliente:

const REGISTRY = {
  CodePlayground: lazy(() => import('./islands/CodePlayground')),
}

O código roda dentro de um <iframe sandbox="allow-scripts">, sem allow-same-origin. Isso significa origem opaca: o script não alcança esta página, nem storage, nem requisição autenticada. É a diferença entre executar código do leitor e dar as chaves da casa a ele.

O custo honesto

Encanamento próprio é código que eu mantenho. A alternativa era adotar Astro, que faz exatamente isto pronto — e que teria significado um segundo build ou reescrever o que já funciona. Para um blog e um portfólio, cem linhas de script ganham de um framework novo.