Compartilhando componentes React via CDN

Desenvolvedor Frontend Sênior · 2025 · 2 min de leitura

Validei UI React via CDN para consumidores atualizarem componentes compartilhados sem subir versão no npm entre microfrontends.

Caminho rejeitado: Usar Module Federation / remotes do webpack (rejeitado no PoC: operação mais pesada)

Visão geral

Na plataforma de microfrontends, toda mudança de UI compartilhada significava novo publish npm, bump de versão em todo consumidor e redeploy. Este PoC verificou se era possível servir componentes ao vivo de uma CDN para apps React e, quando necessário, para stacks legadas.

Problema

Atualizar um botão ou um token compartilhado significava bumps de versão coordenados e redeploys entre times. Isso atrasava correção rotineira de UI.

Restrições

Tinha que funcionar com microfrontends React existentes sem rewrite completo.
Entregável como URL de script compilado na CDN, não npm.
Preferir abordagem runtime simples em vez de tooling de federation.
Precisar de caminho para apps legados não-React.

Arquitetura

Primeira tentativa: embrulhar React remoto como Web Components. Props complexas pelo DOM eram dolorosas e conflitavam com bibliotecas internas. Abordagem final: carregar componentes React simples da CDN em apps React, mais um wrapper Web Component mais fino só para o legado.

Decisões principais

Componentes React via CDN

Motivo

Empacotar, hospedar e consumir via script. Evita o ciclo de atualização npm sem adicionar complexidade de federation.

Alternativas consideradas

Usar Module Federation / remotes do webpack (rejeitado no PoC: operação mais pesada)
Manter publish npm + bumps coordenados (como está hoje: lento demais para correções de token/UI)

Pular Web Components nos apps React

Motivo

Props ricas via Custom Elements eram incômodas e conflitavam com bibliotecas React internas. Manter React como React.

Alternativas consideradas

Forçar todos os consumidores via Custom Elements (rejeitado depois da fricção prop/DOM)

Wrapper Web Component só para o legado

Motivo

Apps antigos precisavam da UI sem adotar React. Custom Element simplificado foi a válvula de escape.

Alternativas consideradas

Deixar o legado em cópias npm congeladas (rejeitado: manutenção dupla para sempre)

Stack

React
TypeScript
Custom Elements API (Web Components)
CDN Delivery

Impacto

Caminho de update do consumidor Script CDN vs bump npm + redeploy

Consumidores React React direto da CDN (sem wrapper de Web Components)

Caminho legado Wrapper Custom Element fino só

Tooling de federation Evitado no escopo do PoC

Mostrou um caminho em que a UI compartilhada podia ir para a CDN e os consumidores React pegarem sem redeploy do consumidor. Também deixou claro quando o wrapper Web Component vale (legado) e quando não vale.

Aprendizados

Um script na CDN muitas vezes basta quando o objetivo é menos processo, não plataforma nova.
Web Components parecem universais, mas forçá-los numa stack muito React costuma custar mais do que economizam.
Uma válvula de escape para o legado pode proteger sistemas antigos sem prejudicar o caminho moderno.

Todos os cases