Olá, colegas entusiastas da web! ?

Antes de começarmos, gostaria de informar que este artigo é uma série de artigos introdutórios sobre padrões de renderização em meu portfólio. Se você estiver curioso, pode conferir a versão completa e tagarela no meu site. Está escrito como uma conversa divertida, tornando muito fácil acompanhar. Mas, por enquanto, vamos manter as coisas simples e diretas aqui em dev.to!

Agora, vamos falar sobre padrões de renderização da web!

O que são padrões de renderização na Web?

Imagine que você está construindo uma casa. Você tem diferentes maneiras de construí-lo, certo? Alguns métodos são rápidos, outros são sofisticados e alguns são uma mistura de ambos. Os padrões de renderização da Web são mais ou menos assim, mas para sites.

São maneiras diferentes de criar e exibir páginas da web. Cada caminho tem seus próprios pontos positivos e pontos não tão bons. Conhecer esses padrões ajuda você a escolher a melhor maneira de construir seu site.

Por que você deveria se importar?

Compreender esses padrões é importante porque eles afetam:

1. A velocidade de carregamento do seu site
2. Como é suave usar
3. Como os mecanismos de pesquisa conseguem encontrar seu site
4. Como é fácil atualizar seu site

Os principais padrões de renderização

Aqui estão os principais padrões que veremos:

Sites estáticos

Aplicativos de várias páginas (MPA)

Renderização do lado do cliente (CSR)

Renderização do lado do servidor (SSR)

Geração de site estático (SSG)

Regeneração Estática Incremental (ISR)

Hidratação

Hidratação Progressiva

Streaming de renderização no servidor

Arquitetura da Ilha

Componentes do servidor

Alguns termos importantes

Antes de prosseguirmos, vamos aprender algumas palavras-chave:

• Time To First Byte (TTFB): a rapidez com que o servidor começa a enviar dados
• Time to Interactive (TTI): quando você pode começar a usar o site
• Primeira pintura com conteúdo (FCP): quando você vê algo na página pela primeira vez
• Largest Contentful Paint (LCP): quando a maior parte da página aparece
• Pré-renderização: Criação de páginas da web com antecedência
• Meta Frameworks: Ferramentas especiais que facilitam a construção de sites
• Renderização isomórfica: uma maneira de tornar os sites rápidos e interativos ao mesmo tempo

Concluindo

Compreender esses padrões é muito útil se você deseja criar ótimos sites. Cada padrão tem seu próprio uso, e saber quando usá-los pode tornar seus sites muito melhores.

Este é apenas o começo de nossa jornada em padrões de renderização. Se quiser saber mais sobre cada padrão, com exemplos e como usá-los, confira meu guia completo no site do meu portfólio.

Lembre-se de que o segredo não é apenas conhecer esses padrões, mas entender quando usá-los. Feliz construção de site! ?

Se você encontrar algum erro ou tiver sugestões de melhorias, entre em contato! Seu feedback é valioso para tornar este conteúdo ainda melhor.