Nuxt Lite: Um Site Estático com Experiência SPA

No desenvolvimento web recente, fomos ensinados a engolir uma contradição evidente: para que alguém leia um post de blog, é necessário que seu navegador baixe meio megabyte de bibliotecas JavaScript, analise árvores virtuais de componentes, reconcilie o HTML e execute um processo custoso chamado "hidratação".

O pressuposto de desenvolvimento é enganoso, pois acredita-se que o usuário sempre tem a melhor conexão com a internet e sempre o melhor hardware. A ampla experiência do usuário deve ser levada em conta. Não é porque seu site parece rápido que ele realmente é rápido, e o desempenho, com razão, pode ficar muito aquém daquele que o Google exige. Sinceramente, acho justo o modo como o Google avalia o desempenho dos sites, pois é a soma desses sites ruins, em cada aba aberta pelo usuário, que o faz se estressar com travamentos e lentidão no celular ou computador.

A hidratação completa de um framework cliente em páginas puramente editoriais não é um triunfo; é a institucionalização da preguiça arquitetural. Quando comecei a desenhar a arquitetura deste site/blog, me recusei a aceitar essa condição de desenvolvimento. Queria, sim, a melhor experiência de desenvolvimento que o ecossistema Nuxt oferece, mas me recusava a entregar ao cliente o peso morto de uma Single Page Application tradicional.

Foi dessa recusa — e da necessidade de atender às minhas próprias exigências de engenharia — que nasceu o Nuxt Lite.

O Paradoxo da Hidratação

O Nuxt é uma obra-prima de engenharia. A facilidade de compor componentes em Vue, usar auto-imports, estruturar layouts elegantes e gerar páginas pré-renderizadas no servidor é formidável. O problema começa no instante em que o HTML pré-renderizado chega ao navegador.

Para que a página passe a "funcionar" como uma aplicação, o runtime do Vue/Nuxt é baixado e executado. Ele inspeciona cada nó do DOM que o próprio servidor já entregou perfeitamente montado, gasta ciclos preciosos da CPU principal (TBT) comparando nós e montando ouvintes de eventos, e solicita dezenas de pequenos pedaços de scripts adicionais via rede.

Isso custa ao usuário final:

• Bloqueio de renderização por ativos que atrasam a exibição inicial;
• Tarefas Longas que travam a rolagem e o clique em dispositivos mais antigos;
• Desperdício de banda com dezenas de requisições de pedaços de código que o usuário jamais usará naquela página.

O Que é o Nuxt Lite?

O Nuxt Lite é um módulo de compilação e runtime minimalista que opera uma cirurgia precisa no ciclo de vida do Nuxt. Em termos simples, ele preserva tudo o que o desenvolvedor gosta no Nuxt, mas purga agressivamente o desperdício antes que a página chegue ao usuário final.

Como é Feito o Processamento:

1. Purga do Runtime Pesado: Durante a finalização do build estático, o módulo remove as referências ao runtime completo do Vue e do Nuxt no HTML de saída, eliminando também atributos SSR obsoletos (data-v-*, __vue_ssr__).
2. Inlining de CSS Inteligente: Analisa rigorosamente os seletores utilizados em cada página. O CSS de layout (cabeçalho, rodapé e estrutura base) é embutido diretamente como CSS crítico inlined (<style data-nl-critical>). O CSS específico de cada artigo ou página é extraído e servido sob demanda.
3. Micro-Runtime de 5.7 KB: Em substituição ao monólito cliente, injetamos um único script vanilla ultra-enxuto de apenas 5.7 KB, sem dependências externas.
4. Navegação SPA Baseada em Payload: Quando o leitor clica em um link interno, o navegador não precisa recarregar a página do zero. O micro-runtime intercepta o clique, faz o download de um _payload.json hierárquico extremamente compacto contendo apenas a árvore do conteúdo, sincroniza instantaneamente as classes do layout e da tag <main>, atualiza metatags de SEO, ajusta o foco de acessibilidade e monta o novo conteúdo no DOM com transição fluida.
5. Hover Prefetching Transparente: Ao aproximar o cursor de um link de post, o payload é pré-carregado em segundo plano. O clique subsequente parece instantâneo — porque os dados já estão na memória.

Sincronização Dinâmica de Layouts

Um dos maiores desafios conceituais ao dispensar o Virtual DOM de um framework reativo é a transição entre diferentes estruturas de página.

Em um projeto bem arquitetado, nem toda página é idêntica. Meu portfólio na página inicial, por exemplo, exige um container amplo de 1200px para dispor cartões de projetos e badges de sistemas com respiro e elegância. Por outro lado, um ensaio ou artigo de blog deve obedecer a cânones estritos de tipografia editorial — largura máxima de 900px, margens confortáveis e ritmo de leitura relaxado.

O Nuxt Lite resolve isso de forma elegante: durante o build, os atributos de cada layout e de cada tag <main> são capturados nos metadados da página. Na navegação cliente, o micro-runtime realiza uma troca cirúrgica não apenas do miolo do conteúdo, mas sincroniza dinamicamente as classes de layout do container pai (layoutAttrs) e do próprio <main> (mainAttrs).

O resultado é que a transição entre a home de 1200px e o artigo de 900px ocorre sem saltos visuais, sem regras com !important e sem nenhum byte de código reativo sobrando na memória.

Quando Usar o Nuxt Lite?

Nenhuma ferramenta é uma bala de prata, e o bom engenheiro de software é aquele que reconhece a fronteira exata de suas criações.

Casos de Uso Ideais:

• Blogs, Ensaios e Publicações Editoriais: Onde o texto, a tipografia e a velocidade de leitura são o núcleo da experiência.
• Portfólios e Sites Institucionais: Onde o impacto visual e a pontuação impecável no Core Web Vitals (FCP e LCP em redes lentas) são cartões de visita indispensáveis.
• Documentações Técnicas: Onde se deseja a fluidez de navegação SPA sem o peso de carregar uma suíte completa de componentes interativos a cada documento.
• Ambientes de Borda (Edge / Cloudflare Pages): Onde a distribuição global em milissegundos se beneficia diretamente de um pacote estático com payloads JSON mínimos.

Quando NÃO Usar:

• Aplicações de Alta Interatividade Cliente: Se você está construindo um editor online de imagens, um painel analítico com dezenas de gráficos em tempo real via WebSocket ou um carrinho de e-commerce com dezenas de filtros reativos por segundo, a reatividade profunda e o sistema de estado reativo completo do Vue/Nuxt tradicional são a ferramenta correta para o trabalho.

E Como Fica o Javascript Reativo?

Ele é completamente cortado do frontend. Se você precisa de reatividade profunda, não use o módulo Nuxt Lite; ainda estou vendo uma forma econômica de transferir javascript reativo para o cliente. Todo o javascript deve ser implementado à maneira antiga de desenvolvimento: vanilla, inline ou incorporado ou linkado no <head>.

A Busca Pelo Código Limpo

Não construí o Nuxt Lite para competir com os gigantes do mercado ou lançar mais um framework na esteira inesgotável da indústria. Construí-o porque tenho apreço pela sobriedade.

Existe uma dignidade particular em entregar um artefato de software que consome apenas a energia estritamente necessária para cumprir sua tarefa. Quando abro as ferramentas de inspeção e vejo o site carregar em milissegundos, sem long tasks, com o caminho crítico limpo e 100 pontos cravados no Lighthouse, sinto a mesma satisfação de quem admira uma arte plástica bem desenvolvida ou um motor perfeitamente ajustado.

A web pode — e deve — ser leve novamente. Basta que tenhamos a coragem de dizer não ao desperdício.

Pacote NPM