Client Side Rendering (CSR)

No artigo anterior, exploramos o conceito de Server Side Rendering (SSR) (clique aqui para conferir). Continuando com o nosso desafio de apresentar três artigos em uma semana, neste texto, aprofundarei o tema do Client Side Rendering, também conhecido como CSR, que frequentemente suscita questionamentos entre desenvolvedores e arquitetos de sistemas.

Introdução ao Client Side Rendering

Client Side Rendering (CSR) é uma técnica de renderização de páginas HTML diretamente no navegador do usuário. Ao contrário do SSR, onde o servidor gera a página HTML e a envia para o usuário, o CSR permite que todas as regras, carregamentos e templates sejam processados diretamente no navegador, reduzindo o ônus de processamento no servidor.

Assim como no SSR, ao solicitar uma página HTML, o servidor envia todos os recursos necessários para o carregamento da página. Durante a etapa de renderização no navegador do usuário, o JavaScript é executado para buscar todos os dados dinâmicos e construir a interface em tempo de execução.

A imagem abaixo ilustra o processo de carregamento de uma tela dentro do navegador utilizando CSR.

Podemos notar que o tempo de carregamento da tela é prolongado nessa abordagem, devido aos recursos serem carregados diretamente no navegador do cliente. Geralmente, os navegadores armazenam esses recursos em cache, o que diminui o tempo de carregamento para interações subsequentes.

Uma abordagem comum do CSR é utilizar extensivamente APIs assíncronas, onde cada uma é responsável por carregar uma parte específica da tela. Isso permite a redução do tempo de carregamento e a disponibilização progressiva de cada segmento da tela para uso conforme seu carregamento.

Vantagens

Assim como qualquer abordagem, o CSR possui vantagens e desvantagens que devemos considerar ao escolher essa estratégia. Nesta parte, vou abordar algumas das vantagens de utilizar o CSR.

• Melhoria na experiência do usuário: O CSR pode proporcionar uma experiência do usuário aprimorada, oferecendo páginas dinâmicas e interativas.
• Redução do tempo de carregamento dos componentes: Devido ao carregamento ser realizado de maneira dinâmica e em tempo de execução, é possível paralelizar o processamento e o carregamento dos componentes.
• Alta escalabilidade: Como a página é gerada em tempo de execução e faz amplo uso do processamento no navegador do cliente, o CSR permite uma alta escalabilidade do produto, diferentemente do SSR que requer um processamento significativo no lado do servidor.
• Desacoplamento de conceitos: O CSR possibilita o desacoplamento dos conceitos de frontend e backend, permitindo que a equipe de backend se concentre nas APIs e a equipe de frontend na experiência do usuário. Isso facilita a colaboração e a especialização de cada equipe.

Com essas melhorias, o CSR apresenta um leque de benefícios que podem ser ponderados ao tomar decisões de arquitetura e desenvolvimento.

Desvantagens

Abaixo estão algumas desvantagens da adoção do modelo CSR:

• Desafios de SEO: Devido ao uso do JavaScript, alguns mecanismos de busca podem enfrentar dificuldades na indexação da página.
• Desempenho: Como a maior parte do processamento ocorre no lado do cliente, uma máquina com baixo desempenho pode comprometer a experiência do usuário, especialmente em páginas mais complexas.
• Complexidade: O emprego do CSR pode levar a uma maior complexidade na equipe de frontend, uma vez que a execução ocorre no lado do cliente.

Conclusão

Em síntese, ao explorarmos o conceito de Client Side Rendering (CSR), percebemos que essa abordagem oferece uma série de vantagens, como a melhoria na experiência do usuário, a redução do tempo de carregamento dos componentes, a alta escalabilidade do produto e o desacoplamento dos conceitos entre frontend e backend. No entanto, é essencial também considerar as desvantagens, como os desafios de SEO, as possíveis limitações de desempenho em dispositivos com recursos limitados e a complexidade adicional que pode ser introduzida para a equipe de frontend.

Diante desse cenário, a escolha entre Client Side Rendering e outras estratégias de renderização, como o Server Side Rendering (SSR) ou até mesmo uma abordagem híbrida, deve ser baseada nas necessidades específicas do projeto, nas metas de desempenho, na interatividade desejada e na capacidade das equipes de lidar com os desafios associados. Cada abordagem traz suas próprias vantagens e desvantagens, e a decisão informada deve levar em consideração todos esses fatores para oferecer a melhor experiência possível aos usuários finais.

Gostou deste artigo sobre Client Side Rendering (CSR)? Compartilhe sua opinião nos comentários abaixo! Adoraríamos ouvir suas experiências e perspectivas sobre o assunto. Se achou o conteúdo útil, não se esqueça de curtir e compartilhar com seus colegas desenvolvedores. Além disso, se quiser receber mais conteúdos relacionados é só nos seguir. Obrigado pelo apoio!