Client-Side Rendering (CSR) é uma técnica comum no desenvolvimento Web moderno, usada para criar aplicações interativas e dinâmicas. Com essa técnica retiramos do servidor a responsabilidade de renderizar a página e trazemos para o lado do cliente, deixando o servidor cuidar do que é mais importante para ele, as regras de negócio. Fazendo essa separação se fez possível oferecer uma experiência de usuário mais fluida, dinâmica e possibilita a criação de novos tipos de aplicações. As vantagens são diversas, mas ao mesmo tempo há trade-offs que devem ser avaliados em cada projeto se vale ou não a pena adotar essa técnica.

O que é Client-Side Rendering (CSR)?

Client-side rendering ou apenas CSR, é uma técnica de desenvolvimento de aplicações dinâmicas onde a renderização da interface ocorre no lado do cliente (navegador). Diferente de como era feito antes dessa técnica se tornar popular, onde o servidor era responsável por fazer esse papel de renderizar a página, retornando ao cliente um arquivo HTML com todo o conteúdo já montado.

Com o CSR passamos o papel de renderizar a página para o navegador (cliente). O servidor apenas envia um arquivo HTML básico que internamente contém links para arquivos Javascript. Ao receber esse HTML o navegador faz download dos arquivos Javascript referenciados que são os responsáveis por renderizar o conteúdo da página. A vantagem do CRS é que uma vez carregado os arquivos Javascript o conteúdo pode ser atualizado dinamicamente sem depender de novas requisições ao servidor. Deixando a experiência de navegação mais fluida para usuário. O CSR é geralmente utilizado em aplicações onde há a necessidade de interações em tempo real ou conteúdos muito dinâmicos como, por exemplo, em single-page applications (SPA). Sendo uma solução para páginas internas, dashboards, ou sistemas onde não há a necessidade de SEO.

Como Client-Side Rendering funciona?

Um exemplo de fluxo de renderização utilizando Client-Side Rendering, seria:

O usuário acessa uma página web, que internamente envia uma requisição ao servidor.
O servidor recebe a requisição e responde enviando um HTML básico contendo praticamente apenas links para arquivos JavaScript e CSS.
O navegador faz o download desse HTML e, assim que terminado, envia novas requisições para baixar os arquivos JavaScript e CSS que estavam referenciados no HTML.
Com os arquivos JavaScript tendo sido baixados eles serão executados e o processo de renderizar a página será realizado.
A partir desse ponto, o JavaScript controla toda aplicação e as interações do usuário, atualizando o conteúdo da página de forma dinâmica, sem novas requisições ao servidor.

Vantagens do Client-Side Rendering

Velocidade: A navegação entre as páginas dentro de uma CSR é extremamente rápida, pois não há a necessidade de fazer várias requisições ao servidor após o carregamento inicial.
Experiência do Usuários: uso CSR são altamente inteiráveis e apresentam ótimo desempenho, proporcionando uma experiência semelhante a aplicativos nativos.
Separation of Concerns: O CSR possibilita a separação entre o Front-end e Back-end, permitindo que o Front-end seja completamente gerido pelo JS, enquanto Back-end cuida apenas dos dados e da lógica do negócio.

Desvantagens do Client-Side Rendering

Alta carga de JS: Em aplicações grandes, os arquivos JS podem se tornar muito pesados, o que pode prejudicar a experiência do usuário, especialmente no carregamento inicial da aplicação.
Problemas de SEO: Como o conteúdo da página renderizado no lado do cliente, os motores de busca têm dificuldades em indexar o conteúdo, já que eles precisam do HTML renderizado e numa aplicação com CSR o HTML está praticamente vazio. Isso pode ser uma desvantagens para aplicações que dependem de SEO como landing pages e e-commerces.
Dependente do cliente: Como a aplicação é executada no lado do cliente, há uma dependência de quanto recurso o mesmo possui, podendo afetar negativamente a experiência do usuário caso seu dispositivo tenha poucos recursos. Além disso, se o dispositivo estiver com a execução de JavaScript desabilitada a aplicação não ira funcionar.

Conclusão

Neste artigo, apresentamos principais pontos importantes sobre o uso do CSR, apresentando os fundamentos e suas vantagens e desvantagens. Através do fluxo CSR, conhecemos as etapas principais como que funciona o ciclo de vida do CSR. Podemos perceber a importância do JavaScript para proporcionar as aplicações que rodam inteiramente no lado do cliente. Apesar dos benefícios do CSR relacionados a experiência do usuário, fica evidente que esse técnica de renderização possui algumas desvantagens relacionado alta carga de JavaScript e problemas relacionados a SEO.

Para contornar as limitações do CSR, temos soluções como o Static Site Generation (SSG) e Server-Side Rendering (SSR). No SSG, as páginas são geradas de forma estática durante o período de build, resultando em HTML já pronto para ser entregue ao cliente. E no caso do SSR, a renderização é feita no lado do servidor que responde com um HTML já renderizado para o cliente.