As 4 camadas de uma Web app 🍰

Quando se fala em construções SPA, independente do framework/biblioteca que se escolha para realizar o desenvolvimento, essa tarefa envolve 4 camadas:

• Componentes/Components
• Gerenciamento de estato/state
• Roteamento/Router
• Renderização/render

Components 🧩

É o elemento visual da página, ele é customizável e reutilizável.

State 📲

Responsável pela comunicação entre os componentes e troca de informações entre eles.

Router 🛣️

Responsável pela navegação entre os componentes, realizar a troca da URL sem a necessidade de atualizar a pagina a cada troca.

Render 🎫

Responsável por entregar o componente para o Browser densenhar na tela.

Existem 3 tipos:

• 100% server - SSR
• A renderização acontece no SERVER, e os componentes são entregues para o CLIENT.

• Vantagens
• Melhora SEO;
• Carregamento inicial mais rápido.

• Desvantagens:
• Aumento da carga no servidor
• Menor interatividade

• Part server e Part client
• Renderização ocorre parte no SERVER e parte no CLIENT

• Vantagens
• Melhora SEO;
• Carregamento inicial mais rápido.
• Interatividade

• Desvantagens:
• Aumento da carga no servidor
• Compatibilidade entre navegadores

• 100 % client
• renderização acontece 100 % no CLIENT, é como a maioria dos frameworks/bibliotecas tratam a renderização.

• Vantagens
• Interatividade
• Desenvolvimento mais ágil

• Desvantagens:
• SEO limitado
• Carregamento inicial mais lento