Artigo original: https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/
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:
- Mecanismos de pesquisa podem rastrear o site e ter uma SEO melhor.
- O carregamento da página inicial é mais rápido.
- É ótimo para sites estáticos.
Desvantagens do lado do servidor:
- Solicitações frequentes ao servidor.
- Uma renderização de página, em média, lenta.
- Recarregamentos de página inteira.
- Interações desinteressantes com o site.
Vantagens do lado do client:
- Ótimas interações com o site.
- Renderização rápida do site da web após o carregamento inicial.
- Ótimo para aplicações da web.
- Uma seleção variada de bibliotecas do JavaScript.
Desvantagens do lado do client:
- Baixa SEO se não for implementado corretamente.
- O carregamento inicial pode levar mais tempo.
- 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!