As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
Estruturas e ferramentas
Não faltam estruturas de front-end, como Angular e Next.js, mas a maioria delas não é criada pensando em microfront-ends. Portanto, às vezes faltam mecanismos para enfrentar os desafios da arquitetura de microfrontend.
Considerações gerais sobre o enquadramento
Este guia não tem como objetivo recomendar ou comparar estruturas individuais. Como vários microfront-ends geralmente são executados na mesma página do aplicativo web, o carregamento e o desempenho do tempo de execução são as principais preocupações. É importante escolher uma estrutura que apresente o mínimo de sobrecarga possível.
As estruturas são divididas com base na camada de renderização:
-
Renderização do lado do cliente (CSR)
-
Renderização do lado do servidor (SSR)
As arquiteturas de front-end incluem outros recursos, como geração estática de sites (SSG). No entanto, o SSG é executado apenas uma vez. Os microfront-ends são compostos principalmente em tempo de execução, então CSR e SSR são as principais opções.
Renderização do lado do cliente
Para CSR, há duas opções populares:
-
Estrutura única de SPA
-
Federação de módulos
O Single SPA é uma opção leve para compor micro-front-ends. Ele resolve os desafios mais comuns em arquiteturas de microfrontend, como compor vários microfront-ends na mesma página e evitar conflitos de dependências.
O Module Federation começou como um plug-in, oferecido pelo webpack 5, e resolve a grande maioria dos desafios em arquiteturas de microfront-end, incluindo gerenciamento de dependências em diferentes artefatos. O Module Federation 2.0 funciona nativamente com Rspack, webpack, esbuild e agora com. JavaScript
Considere não usar nenhuma estrutura. Os navegadores modernos, com uma participação de mercado geral de 98%, de acordo com caniuse.com
Renderização do lado do servidor
No lado do SSR, as duas opções principais são mais complicadas:
-
Adote uma estrutura existente, como o Next.js, e aplique um princípio de microfront-ends que usa a Federação de Módulos.
-
Use HTML- over-the-wire para trocar fragmentos HTML que representam microfront-ends e compor esses fragmentos dentro de um modelo em tempo de execução. Um exemplo dessa abordagem é o Podium.
