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
<a name="frameworks-tools"></a>

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
<a name="framework-general"></a>

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](https://caniuse.com/usage-table), oferecem recursos como elementos personalizados de forma nativa e são adequados para um aplicativo de microfront-ends. Quando necessário, combine elementos personalizados com bibliotecas leves para propagação de eventos, internacionalização ou outras preocupações específicas.

**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.