Photo by Lautaro Andreani on Unsplash
Olá a todos! Como foi o primeiro dia do feriado prolongado de vocês? Hoje quero compartilhar com vocês conceitos de vários modos de renderização web: SSG, SSR, CSR e ISR. Eles parecem semelhantes, mas têm detalhes diferentes. Antes de decidir qual usar, vamos dar uma olhada nas introduções abaixo!
Static Site Generation (SSG)
SSG, ou geração estática (Static Generation), significa gerar arquivos HTML ao construir (build) todo o projeto. Esses arquivos HTML já contêm os dados necessários para serem exibidos. Este modo de renderização é um tipo de pré-renderização (pre-rendering). O SSG é muito adequado para sites estáticos onde o conteúdo não muda, porque todos os dados são obtidos no momento da construção. Esses arquivos HTML podem ser colocados em uma CDN e armazenados em cache para melhorar o desempenho do site. Além disso, a adoção do modo de renderização SSG também é benéfica para o SEO.
Server-side Rendering (SSR)
SSR, ou renderização no lado do servidor (Server-side Rendering), significa que toda vez que o navegador (lado do cliente) envia uma solicitação (request), o servidor gera o arquivo HTML e o envia de volta ao navegador para exibição. Este modo de renderização é muito adequado para dados que mudam com frequência. No entanto, como o servidor leva tempo para gerar o arquivo HTML, o tempo de resposta do site será maior e os usuários verão uma tela branca enquanto esperam. O SSR também é considerado um tipo de pré-renderização, por isso também é bastante amigável para SEO~ Mas deve-se notar que esse método exige que o servidor processe constantemente as solicitações dos usuários.
Client-side Rendering (CSR)
CSR, ou renderização no lado do cliente (Client-side Rendering), implica praticamente o que o nome diz. O arquivo HTML enviado pelo servidor para o navegador pode ser considerado sem conteúdo. O navegador só pode renderizar na tela após buscar dados do servidor. O modo de renderização usado por SPA (Single Page Application como React ou Vue) é o CSR. A maior vantagem desse modo é que não há necessidade de buscar arquivos do servidor novamente ao trocar de página, para que os usuários não vejam uma tela branca, o que é considerado uma experiência de usuário muito boa. No entanto, o tempo de renderização dependerá do ambiente do cliente e, por causa disso, a carga no servidor é bastante reduzida.
Incremental Static Regeneration (ISR)
ISR, ou regeneração estática incremental (Incremental Static Regeneration), é um modo de renderização menos ouvido e também é considerado um tipo de pré-renderização. O ISR gera todos (ou parte) dos arquivos HTML ao construir o projeto. Quando há uma nova solicitação e um tempo predeterminado já passou, o servidor primeiro entregará ao navegador o arquivo antigo enquanto regenera o arquivo mais recente em segundo plano e, em seguida, o enviará ao navegador para exibição após a conclusão da geração. Se um usuário for para uma página que ainda não foi gerada (generate), o servidor gerará o arquivo na hora e fará o cache dele, para que o próximo usuário nesta página possa obter diretamente o arquivo do cache. O ISR é muito semelhante ao SSG, mas resolve o problema de o SSG não poder atualizar o conteúdo dos dados, e os arquivos HTML também serão armazenados em cache na CDN, portanto, também reduz a carga no servidor em comparação com o SSR.
Qual você deve usar?
Cada modo de renderização tem seus prós e contras, e qual escolher depende do nosso projeto. Não há um vencedor claro.
- Dashboards de sistemas internos onde os dados mudam constantemente e SEO não é necessário são muito adequados para usar CSR.
- Se a taxa de mudança de dados não for baixa, mas o SEO for necessário, você pode considerar o uso de SSR.
- Se os dados raramente precisam ser atualizados, como sites de eventos ou marketing, e o SEO também é importante, o uso do SSG é muito adequado.
- Se os dados não precisarem ser atualizados muito ou se houver muitas páginas e o SEO for necessário, como páginas de produtos, o ISR é uma boa escolha.
Eu também desenhei uma tabela (em inglês XD), dêem uma olhada~
Pre-render no Next.js
O Next.js tem suporte integrado para os modos de renderização mencionados acima e também usa por padrão o SSG para renderizar páginas da web que não precisam buscar dados (fetch). Se você precisar obter dados do servidor, ele será misturado com CSR (híbrido). Se você quiser usar outros modos de renderização, pode usar as seguintes funções fornecidas pelo Next.js:
| Function | Description |
|---|---|
| getStaticProps (Static Generation) | Busca os dados necessários no momento da construção e os coloca no arquivo HTML |
| getStaticPaths (Static Generation) | Decide quais rotas dinâmicas (dynamic) precisam ser geradas como arquivos HTML no momento da construção |
| getServerSideProps (Server-side Rendering) | Uma função que é executada toda vez que o navegador envia uma solicitação para obter os dados necessários |
Conclusão
É isso por hoje, vamos continuar amanhã~ Amanhã compartilharei com vocês como usar essas três funções para implementar sites com diferentes modos de renderização! O que vocês acharam dos modos de renderização aprendidos hoje?