CSR, SSR, SSG, ISR: como escolher o paradigma de renderização certo

Estruturas da web modernas oferecem muitas opções sobre como entregar um site ou aplicativo do servidor para o cliente. Você pode gerar HTML em qualquer um dos lados ou pré-renderizá-lo para distribuição em alta velocidade por meio de uma rede de entrega de conteúdo.

Decidir como estruturar um site ou aplicativo depende de alguns fatores diferentes. Você precisa estar ciente de como os visitantes acessarão seu site ou aplicativo. Você deve entender se a velocidade de carregamento é mais importante no carregamento inicial ou na navegação subsequente. Considere também a frequência com que você atualizará o site.

Tenha todos esses fatores em mente para avaliar os prós e contras de cada paradigma de renderização.

Renderizando sites em mais de uma maneira

Renderizar um site refere-se ao processo pelo qual um site é exibido em um navegador da web. Existem muitas maneiras diferentes de abordar o processo de conversão de dados brutos em HTML formatado na tela do usuário.

Cada método tem seus prós e contras, e conhecer as vantagens e desvantagens de cada um pode ajudá-lo a escolher o certo para o seu site.

CSR: o navegador assume o controle

CSR significa Client Side Rendering. Quando você renderiza um aplicativo ou site do lado do cliente, o servidor passa pouco ou nenhum HTML, exceto um pequeno trecho de código clichê. A página solicita todos os dados necessários do servidor, após o evento de carregamento da página, por meio de solicitações AJAX.

Quando um aplicativo ou página renderiza no lado do cliente, o servidor passa um script para o cliente que irá gerar o HTML no navegador do cliente. Isso permite aplicativos de página única que não atualizam o navegador quando você interage com eles.

Os aplicativos CSR geralmente são carregados rapidamente na navegação, mas podem ser lentos para carregar inicialmente. A velocidade vai depender muito do framework que você escolher para fazer a renderização e de quantas bibliotecas extras e add-ons você usa. Maioria frameworks JavaScript modernos populares incluir uma opção para CSR.

Páginas e aplicativos totalmente renderizados do lado do cliente sofrem com a incapacidade de navegar diretamente para uma determinada página usando um URL. Quando um aplicativo renderizado do lado do cliente é iniciado pela primeira vez, independentemente da URL inserida, ele navegará para o mesmo ponto de partida.

SSR: renderizando em um servidor central

SSR significa Server Side Rendering. Essa é uma forma muito mais tradicional de renderização de página da Web, na qual os sites geram HTML com base em modelos e enviam uma combinação de HTML, folhas de estilo e scripts para o cliente. A maioria de os frameworks web de back-end mais populares se enquadram nesta categoria.

Aplicativos e sites renderizados no lado do servidor tendem a ter carregamentos iniciais mais rápidos, mas cada navegação sucessiva exigirá uma atualização completa. Isso significa que eles não apenas levarão mais tempo, mas os desenvolvedores que trabalham com SSR precisarão levar em consideração o gerenciamento de sessão.

A maior vantagem dos sites e aplicativos gerados por SSR é a consistência da navegação de caminho. Um usuário inserindo um determinado caminho será levado diretamente para a página solicitada. Algumas estruturas gerenciam redirecionamentos de usuários de página para página dentro do aplicativo, mas os usuários podem não conseguir acessar a página que desejam inicialmente.

Muitos frameworks modernos oferecem soluções combinadas que começam servindo uma página renderizada pelo servidor para o cliente. Depois que a página é carregada, ocorre um evento conhecido como hidratação, no qual eventos de script do lado do cliente são anexados aos controles da página. A partir daqui, o cliente trata de qualquer navegação.

Uma dinâmica combinada oferece a capacidade de os usuários irem diretamente para qualquer página em um aplicativo, ao mesmo tempo em que recebem a velocidade e a suavidade de um aplicativo de página única. Next.js oferece vários paradigmas de renderização, assim como Nuxt.js e Sveltekit.

SSG: renderização minimizada

SSG, ou Static Site Generation, ignora a necessidade de gerar HTML no lado do cliente ou do servidor. Em vez disso, sites e aplicativos no estilo SSG pré-compilam todas as páginas de que podem precisar e enviam os resultados para um CDN para entrega rápida.

Este é um método extremamente eficaz de fornecer páginas da Web com extrema rapidez. Os resultados são normalmente compilados em pacotes simples contendo todo o HTML e folhas de estilo necessárias para uma página individual. Esses pacotes são mantidos o mais compacto possível para garantir que o usuário os receba o mais rápido possível.

Os sites SSG tendem a oferecer velocidades de carregamento excepcionalmente rápidas, apesar de exigirem uma atualização para cada navegação. A principal desvantagem de um site estático, no entanto, é a falta de flexibilidade. Sistemas altamente dinâmicos, como aplicativos de mídia social ou plataformas complexas de comércio eletrônico, exigirão muito mais mudanças do que um SSG pode lidar facilmente.

Muitos sites estáticos também exigirão uma quantidade maior de sobrecarga para alterar, pois cada nova alteração precisará ser compilada independentemente. Isso torna a renderização no estilo SSG uma escolha ruim para sites que mudam rapidamente, como uma vitrine digital com inventário que muda rapidamente ou aplicativos de mídia social.

ISR: Um pouco de tudo

Facilmente o tipo mais complexo de renderização, mas também o mais benéfico, ISR significa Incremental Static Regeneration. O ISR combina a velocidade e a escalabilidade de sites gerados estaticamente com a reatividade de aplicativos estilo SSR e CSR.

Quando qualquer página é solicitada em uma página ou aplicativo no estilo ISR, o servidor primeiro verifica se há uma versão em cache não expirada da página. Se houver, o servidor servirá imediatamente a página em cache.

Se não existir uma versão em cache da página ou se tiver passado tempo suficiente desde a sua geração, o servidor irá gerar uma nova versão. Esta nova versão será passada para o cliente e armazenada em cache para uso futuro.

Esse tipo de renderização é mais complexo de configurar, mas automatiza a maioria dos problemas que os sites SSG normalmente enfrentam. Isso permite que os aplicativos ofereçam a velocidade e a confiabilidade de um aplicativo gerado estaticamente enquanto automatizam a sobrecarga extra.

Vários frameworks modernos já oferecem a opção de renderização no estilo ISR. Muitos mais têm suporte para geração incremental no desenvolvimento. A maioria das principais estruturas em breve oferecerá suporte à renderização ISR, se ainda não o fizer.

Qual tipo de renderização é o melhor?

Existem várias maneiras de renderizar um site ou aplicativo. Cada um desses quatro tipos de renderização tem diversas variações. Nenhum tipo de renderização é ideal para todos os projetos, e o tipo que você escolher dependerá do que é mais importante em seu site ou aplicativo.

Ao escolher um paradigma de renderização para seu projeto, é importante considerar a velocidade, como seu público usará seu projeto e com que frequência o site será alterado. Esses serão os princípios básicos que ajudarão você a decidir sobre a melhor forma de estruturar seu site ou aplicativo.