Artigo original escrito por: Cristian Vega
Artigo original: Client-side vs. server-side rendering: why it’s not all black and white
Traduzido e adaptado por: Daniel Rosa

Desde o início dos tempos, o método convencional para se colocar uma página de HTML na tela era por meio da renderização do lado do servidor. Era, de fato, a única maneira. Você carregava as páginas .html no servidor, que as transformava em documentos utilizáveis no navegador do usuário.

A renderização do lado do servidor funcionava muito bem naquela época, também, já que a maioria das páginas da web serviam mais para a exibição de imagens estáticas e de texto, com muito pouca interatividade.

Nos dias de hoje, esse já não é mais o caso. Você pode até dizer que os sites da web de hoje estão mais para aplicações que fazem de conta que são sites da web. Você pode usá-los para enviar mensagens, atualizar informações on-line, fazer comprar e assim por diante. A web, agora, está simplesmente muito mais avançada do que costumava ser.

Faz sentido, então, que a renderização do lado do servidor, aos poucos, comece a ficar para trás, enquanto o método de renderizar páginas da web do lado do client passa a ser cada vez mais o método preferencial.

Qual desses métodos é a melhor opção? Assim como ocorre com a maioria das questões relacionadas ao desenvolvimento, depende do que você está planejando fazer com seu site da web. Você precisa entender as vantagens e desvantagens, para somente então decidir por conta qual o melhor caminho a seguir para você.

Como funciona a renderização do lado do servidor

A renderização do lado do servidor é o método mais comum de exibição de informações na tela. Ela funciona convertendo os arquivos HTML no servidor em informações úteis para o navegador.

Ao visitar um site na web, seu navegador faz uma requisição ao servidor, que contém o conteúdo do site da web. Essa solicitação geralmente leva apenas alguns milissegundos, mas, no fim, depende se muitos fatores:

  • Sua velocidade de internet
  • A localização do servidor
  • Quantos usuários estão tentando acessar o site
  • O nível de otimização do site da web, apenas para citar alguns desses fatores

Tão logo se encerra o processamento da solicitação, o navegador recebe de volta o HTML totalmente renderizado e o exibe na tela. Se você, então, decidir visitar uma página diferente do site da web, o navegador mais uma vez fará uma requisição para obter as novas informações. Isso ocorrerá toda vez que você visitar uma página cuja versão em cache não esteja disponível para o navegador.

Não importa se a página tiver apenas alguns itens diferentes da página atual. O navegador pedirá a página inteira e fará a nova renderização de tudo, desde o início.

Imagine, por exemplo, que o documento de HTML abaixo foi colocado em um servidor imaginário com o endereço HTTP exemplo.site-de-teste.com.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Exemplo de site da web</title>
  </head>
  <body>
    <h1>Meu site da web</h1>
    <p>Este é um exemplo do meu site da web</p>
    <a href="http://exemplo.site-de-teste.com/outro.html.">Link</a>
  </body>
</html>

Se você digitasse o endereço do site da web de exemplo no URL de seu navegador imaginário, ele faria uma solicitação ao servidor que está sendo utilizado por aquele URL e aguardaria por uma resposta em texto para renderizar no navegador. Neste caso, o que você veria seria o título, o conteúdo do parágrafo e o link.

Agora, vamos supor que você queira clicar no link da página renderizada, que contém o código abaixo.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Exemplo de site da web</title>
  </head>
  <body>
    <h1>Meu site da web</h1>
    <p>Este é um exemplo do meu site da web</p>
    <p>Aqui temos mais conteúdo vindo de outro.html</p>
  </body>
</html>

A única diferença entre a página anterior e essa é o fato dessa página não ter um link, mas um outro parágrafo em seu lugar. A lógica diria que somente o novo conteúdo fosse renderizado, enquanto o resto poderia ser deixado como está. Infelizmente, não é assim que funciona a renderização do lado do servidor. O que ocorre, de fato, é que toda a nova página é renderizada, não apenas o novo conteúdo.

Embora isso possa não parecer grande coisa nesses dois exemplos, a maioria dos sites da web não é assim tão simples. Os sites da web modernos têm centenas de linhas de código e são muito mais complexos. Imagine, então, navegar para uma página da web e ter de esperar toda vez que a página seja renderizada para navegar pelo site. Se você já visitou um site do WordPress, já viu que ele pode ser bem lento. Esse é um dos motivos.

O lado positivo é o fato de a renderização do lado do servidor ser ótima para a SEO. O conteúdo está presente antes de você o obter, o que faz com que os mecanismos de busca sejam capazes de indexar o site e de rastreá-lo sem problemas. Isso não é possível na renderização do lado do client. Ao menos, não de modo simples.

Como funciona a renderização do lado do client

Quando os desenvolvedores falam em renderização do lado do client, o que eles estão querendo dizer é renderizar o conteúdo no navegador usando o JavaScript. Assim, em vez de buscar todo o conteúdo do documento HTML, você obtém a base do documento HTML com um arquivo JavaScript que renderizará o resto do site usando o navegador.

Essa é uma abordagem relativamente nova de se renderizar sites da web e não se tornou verdadeiramente popular até que as bibliotecas de JavaScript começaram a incorporá-la em seu estilo de desenvolvimento. Alguns exemplos dignos de nota são o Vue.js e o React.js, sobre os quais eu escrevi um pouco mais aqui (texto em inglês).

Voltando ao nosso site anterior, exemplo.site-de-teste.com, imagine que você, agora, tem um arquivo index.html com as linhas de código abaixo.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Site da web de exemplo</title>
</head>
<body>
  <div id="root">
    <app></app>
  </div>
  <script src="https://vuejs.org"type="text/javascript"></script>
  <script src="location/of/app.js"type="text/javascript"></script>
</body>
</html>

Você pode ver imediatamente que existem algumas mudanças significativas na maneira como o index.html funciona ao renderizar usando o client.

Para começar, em vez de ter o conteúdo no arquivo HTML, você tem uma div, que será o contêiner, com o id 'root'. Você também tem dois elementos script logo acima da tag de fechamento do elemento body. Um deles carregará a biblioteca Vue.js, do JavaScript, enquanto o outro carregará um arquivo chamado app.js.

Isso é bastante diferente de utilizar a renderização do lado do servidor, pois o servidor, agora, fica responsável apenas por carregar o mínimo necessário para o site da web, o boilerplate principal. Todo o resto é tratado por uma biblioteca do JavaScript do lado do client (em nosso caso, a Vue.js) e por código personalizado em JavaScript.

Se você fizesse uma solicitação ao URL somente com o código acima, receberia uma tela em branco. Não há nada para se carregar, já que o conteúdo precisa ser renderizado usando o JavaScript.

Para consertar isso, você colocaria as linhas de código abaixo no arquivo app.js.

var data = {
        title:"Meu site da web",
        message:"Este é um exemplo do meu novo site da web"
      }
  Vue.component('app', {
    template:
    `
    <div>
    <h1>{{title}}</h1>
    <p id="maisConteudo">{{message}}</p>
    <a v-on:click='novoConteudo'>Link</a>
    </div>
    `,
    data: function() {
      return data;
    },
    methods:{
      novoConteudo: function(){
        var node = document.createElement('p');
        var textNode = document.createTextNode('Aqui temos mais conteúdo de outro.html');
        node.appendChild(textNode);
        document.getElementById('maisConteudo').appendChild(node);
      }
    }
  })
  new Vue({
    el: '#root',
  });

Agora, se você visitar o URL, verá o mesmo conteúdo que viu no exemplo do lado do servidor. A diferença principal está no fato de que, se você clicasse no link da página para carregar mais conteúdo, o navegador não faria outra solicitação ao servidor. Você está renderizando os itens com o navegador. Assim, ele usará o JavaScript para carregar o novo conteúdo e o Vue.js garantirá que apenas o novo conteúdo seja renderizado. Todo o resto será deixado como está.

Isso é muito mais rápido, já que você está carregando apenas uma seção muito pequena da página para obter o novo conteúdo, ao invés de carregar a página inteira.

Existem, porém, pontos negativos em se usar a renderização do lado do client. Como o conteúdo não é renderizado até que a página seja carregada no navegador, a SEO do site da web sofrerá com isso. Há maneiras de se contornar isso, mas não é tão fácil quanto na renderização do lado do servidor.

Outra coisa que se deve ter em mente é o fato de seu site da web/aplicação não ser capaz de carregar até que TODO o JavaScript seja baixado no navegador. Isso faz sentido, já que ele contém todo o conteúdo que será necessário. Se os usuários estiver em uma conexão lenta com a internet, isso pode fazer com que o tempo inicial de carregamento seja grande.

Os prós e contras de cada uma das abordagens

Bem, aí está. Essas são as diferenças principais entre a renderização do lado do servidor e do lado do client. Somente você, o desenvolvedor, pode decidir qual é a melhor opção para seu site da web ou aplicação.

Abaixo, temos um resumo rápido dos prós e contras de cada uma das abordagens:

Vantagens do lado do servidor:

  1. Mecanismos de pesquisa podem rastrear o site e ter uma SEO melhor.
  2. O carregamento da página inicial é mais rápido.
  3. É ótimo para sites estáticos.

Desvantagens do lado do servidor:

  1. Solicitações frequentes ao servidor.
  2. Uma renderização de página, em média, lenta.
  3. Recarregamentos de página inteira.
  4. Interações desinteressantes com o site.

Vantagens do lado do client:

  1. Ótimas interações com o site.
  2. Renderização rápida do site da web após o carregamento inicial.
  3. Ótimo para aplicações da web.
  4. Uma seleção variada de bibliotecas do JavaScript.

Desvantagens do lado do client:

  1. Baixa SEO se não for implementado corretamente.
  2. O carregamento inicial pode levar mais tempo.
  3. Na maioria dos casos, exige uma biblioteca externa.

Se quiser aprender mais sobre o Vue.js, confira o site da web do autor, juanmvega.com, onde você verá vídeos e artigos sobre o assunto!