Comparação entre Client-Side Rendering e Server-Side Rendering: Impactos na Performance e Experiência do Usuário

Introdução ao Rendering em Aplicações Web

Quando falamos sobre o desenvolvimento de aplicações web, um dos aspectos mais cruciais a considerar é a forma como o conteúdo é renderizado. O processo de renderização pode ser realizado no lado do cliente (Client-Side Rendering - CSR) ou no lado do servidor (Server-Side Rendering - SSR). Cada abordagem possui suas vantagens e desvantagens, impactando diretamente na performance e na experiência do usuário (ISKANDAR et al., 2020). Neste artigo, exploraremos essas duas técnicas em profundidade, analisando suas implicações e fornecendo exemplos práticos em C#.

O que é Client-Side Rendering?

Client-Side Rendering é um método no qual o conteúdo da aplicação é gerado no navegador do usuário (ISKANDAR et al., 2020). Isso significa que, após o carregamento inicial da página, as interações subsequentes geralmente não requerem novas solicitações ao servidor para renderizar o conteúdo, pois a maior parte do processamento é feita no cliente. O CSR pode permitir uma interação mais fluida e responsiva, mas a experiência do usuário pode ser comprometida se o JavaScript não for carregado rapidamente.

Um exemplo típico de CSR é o uso de frameworks como React, Angular ou Vue.js. Nesses casos, o servidor entrega uma página HTML básica junto com um bundle de JavaScript, que é responsável por manipular o DOM e renderizar a aplicação. Este padrão de desenvolvimento aumenta a complexidade, mas também oferece uma flexibilidade maior para criar interfaces dinâmicas e interativas.

A seguir um exemplo de código em c#, disponibilizando um json como retorno de um endpoint:

// Classe de produto com propriedades simples
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{

    // Método GET para retornar os produtos
    [HttpGet]
    public async Task < IActionResult > GetProductsAsync()
    {
        // Criando uma lista de produtos como exemplo
        var products = new List
        {
            new Product { Id = 1, Name = "Product A", Price = 10.99M },
            new Product { Id = 2, Name = "Product B", Price = 20.99M }
        };

        // Retornando a lista de produtos como JSON
        return Ok(products);
    }
}

Funcionamento do CSR:

User accesses the website
       ¦
       V
+----------------------+
¦ Request sent to the  ¦
¦      Web Server      ¦
+----------------------+
       ¦
       V
+----------------------+
¦ Server returns a     ¦
¦  basic HTML file     ¦
¦  and JavaScript (JS) ¦
+----------------------+
       ¦
       V
+----------------------+
¦ Browser downloads    ¦
¦ and executes JS      ¦
+----------------------+
       ¦
       V
+----------------------+
¦ JS makes API calls   ¦
¦  to fetch data (JSON)¦
+----------------------+
       ¦
       V
+----------------------+
¦ JS dynamically       ¦
¦ renders the content  ¦
¦ in the browser       ¦
+----------------------+
       ¦
       V
User interacts with the page
(SPA application is active and fast)

O que é Server-Side Rendering?

Server-Side Rendering, por outro lado, refere-se ao processo em que a renderização do conteúdo acontece no servidor antes que a página seja enviada ao cliente (ISKANDAR et al., 2020). Isso significa que o servidor gera o HTML e o envia para o navegador, onde o conteúdo é exibido imediatamente ao usuário, sem a necessidade de processamento adicional no lado do cliente. Essa abordagem pode resultar em um tempo de carregamento inicial mais rápido, pois o usuário recebe uma página já renderizada.

Frameworks como ASP.NET MVC ou Razor Pages são exemplos de tecnologias que suportam SSR. A renderização inicial é rápida, pois o navegador recebe uma página HTML completamente renderizada. É importante notar que, enquanto o SSR pode ser mais rápido no início, a navegação subsequente pode ser mais lenta, já que cada interação geralmente resulta em uma nova solicitação ao servidor.

A seguir, um exemplo de código em C# que inicia a renderização de uma View para gerar o HTML dinâmico no servidor:

// Classe de produto com propriedades simples
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

[Route("api/[controller]")]
public class ProductsController : ControllerBase
{

    // Método GET para retornar os produtos
    [HttpGet]
    public IActionResult GetProducts()
    {
        // Criando uma lista de produtos como exemplo
        var products = new List
        {
            new Product { Id = 1, Name = "Product A", Price = 10.99M },
            new Product { Id = 2, Name = "Product B", Price = 20.99M }
        };

        // Retornando a View e passando os produtos como modelo
        return View(products);
    }
}

Funcionamento do SSR:

User accesses the website
       ¦
       V
+--------------------------+
¦ Request sent to the      ¦
¦      Web Server          ¦
+--------------------------+
       ¦
       V
+--------------------------+
¦ Server processes the     ¦
¦ request, fetches data    ¦
¦ (from a database or API) ¦
+--------------------------+
       ¦
       V
+--------------------------+
¦ Server generates a fully ¦
¦ rendered HTML page with  ¦
¦ dynamic content          ¦
+--------------------------+
       ¦
       V
+--------------------------+
¦ Server sends the full    ¦
¦ HTML page to the browser ¦
+--------------------------+
       ¦
       V
+--------------------------+
¦ Browser displays the     ¦
¦ page immediately         ¦
+--------------------------+
       ¦
       V
User interacts with the page
(New requests go to the server)

Comparação de Performance

A performance é um dos fatores mais críticos ao escolher entre CSR e SSR. No CSR, após o carregamento inicial, a navegação entre as páginas pode ser muito rápida, pois não há necessidade de recarregar toda a página. No entanto, o tempo de carregamento inicial pode ser mais longo, pois o navegador precisa baixar e executar o JavaScript antes de renderizar qualquer conteúdo. Isso pode resultar em uma experiência de usuário insatisfatória, especialmente em conexões lentas ou em dispositivos com hardware limitado (ISKANDAR et al., 2020).

No SSR, o tempo de carregamento inicial tende a ser mais rápido porque o HTML é enviado pronto para ser exibido. Entretanto, a navegação entre páginas pode ser mais lenta, uma vez que cada interação geralmente resulta em uma nova solicitação ao servidor. Isso pode afetar a fluidez da experiência do usuário, especialmente em aplicações que exigem interatividade constante.

Experiência do Usuário

A experiência do usuário (UX) também varia entre CSR e SSR. O CSR pode proporcionar uma experiência mais fluida e interativa após o carregamento inicial, permitindo transições suaves e atualizações de conteúdo sem recarregar a página. Isso é especialmente benéfico em aplicações que requerem interação constante, como redes sociais ou aplicações colaborativas.

Por outro lado, o SSR pode oferecer uma melhor experiência inicial, especialmente em conexões lentas, pois o usuário pode visualizar o conteúdo mais rapidamente. Contudo, se a aplicação depender fortemente de interações dinâmicas, a UX pode ser prejudicada pela latência das requisições ao servidor. Assim, a escolha entre CSR e SSR deve levar em conta o perfil do usuário e a natureza da aplicação.

Cenários de Uso

A escolha entre CSR e SSR muitas vezes depende do tipo de aplicação e dos requisitos do projeto. Aplicações que exigem interatividade intensa, como plataformas de jogos ou interfaces de usuário dinâmicas, podem se beneficiar mais do CSR. Por outro lado, sites que priorizam SEO e tempo de carregamento inicial, como blogs ou páginas de produtos, podem se sair melhor com SSR.

Um exemplo de aplicação que se beneficia do Server-Side Rendering (SSR) é o próprio site do Leaders Tec Br (https://leaders.tec.br), que necessita que seu conteúdo seja indexado corretamente pelos mecanismos de busca. Nesse contexto, a capacidade de renderizar o conteúdo no servidor antes de enviá-lo ao cliente é crucial para garantir que os crawlers dos mecanismos de busca possam acessar e indexar o conteúdo de forma eficiente.

Alternativas Híbridas

Uma abordagem que tem ganhado popularidade é a utilização de uma solução híbrida, que combina os benefícios de CSR e SSR (THAKKAR, 2020). Frameworks como Next.js e Nuxt.js permitem que os desenvolvedores renderizem páginas no servidor inicialmente e, em seguida, utilizem o CSR para interações subsequentes. Isso oferece uma experiência de carregamento rápido inicialmente, juntamente com a fluidez das interações que o CSR proporciona.

Essa combinação pode ser ideal para aplicações que precisam atender a diferentes requisitos, como SEO, performance e interatividade. Ao adotar uma abordagem híbrida, os desenvolvedores podem garantir que as aplicações sejam otimizadas para uma variedade de cenários e perfis de usuários.

Conclusão

A escolha entre Client-Side Rendering e Server-Side Rendering é complexa e deve ser feita com base nas necessidades específicas do projeto. Ambos os métodos têm suas vantagens e desvantagens em termos de performance e experiência do usuário. Compreender as diferenças e os impactos de cada abordagem é fundamental para desenvolver aplicações web eficientes e que atendam às demandas dos usuários. É importante também considerar fatores como SEO, segurança e escalabilidade ao tomar essa decisão.

O ideal é avaliar o contexto da aplicação e, se necessário, até mesmo considerar uma abordagem híbrida que combine os pontos fortes de CSR e SSR. Com a evolução constante das tecnologias web, novas soluções e abordagens podem surgir, tornando a discussão sobre CSR e SSR ainda mais relevante para desenvolvedores e arquitetos de software.