Renderização do lado do cliente vs. renderização do lado do servidor

Inicialmente, as estruturas da web tinham visualizações renderizadas no servidor. Agora está acontecendo no cliente. Vamos explorar as vantagens e desvantagens de cada abordagem.

atuação

Com a renderização do lado do servidor, sempre que você deseja ver uma nova página da web, é necessário sair e obtê-la:

Diagrama de como a renderização do lado do servidor funciona

Isso é análogo a você dirigir para o super mercado toda vez que quiser comer.

Com a renderização do lado do cliente, você vai ao super mercado uma vez e passa 45 minutos andando comprando um monte de comida durante o mês. Então, sempre que quiser comer, basta abrir a geladeira.

Diagrama de como a renderização do lado do cliente funciona

Cada abordagem tem suas vantagens e desvantagens quando se trata de desempenho:

  • Com a renderização do lado do cliente, o carregamento da página inicial será lento. Como a comunicação pela rede é lenta e são necessárias duas viagens de ida e volta ao servidor antes que você possa começar a exibir o conteúdo para o usuário. No entanto, depois disso, todo carregamento de página subsequente será extremamente rápido.
  • Com a renderização no servidor, o carregamento inicial da página não será muito lento. Mas não será rápido. E nenhum de seus outros pedidos.

Para ser mais específico, com a renderização do lado do cliente, a página inicial será mais ou menos assim:


  
    
    
  
  
    
  

app.js terá todas as páginas HTML em JavaScript como strings. Algo assim:

var pages = {
  '/': ' ... ',
  '/ foo': ' ... ',
  '/ bar': ' ... ',
};

Então, quando a página for carregada, a estrutura examinará a barra de URL, obterá a string nas páginas ['/'] e a inserirá em

. Além disso, quando você clica em links, a estrutura intercepta o evento, insere a nova string (digamos, páginas ['/ foo']) no contêiner e evita que o navegador ative a solicitação HTTP como normalmente faz.

SEO

Suponha que nosso rastreador da Web comece solicitando o reddit.com:

var request = require ('solicitação');
request.get ('reddit.com', função (erro, resposta, corpo) {
  // body se parece com isso:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Notícias sobre hackers 
  // ... outras  tags ...
});

O rastreador usa o material no corpo da resposta para gerar novas solicitações:

var request = require ('solicitação');
request.get ('reddit.com', função (erro, resposta, corpo) {
  // body se parece com isso:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Notícias sobre hackers 
  // ... outras  tags ...
  request.get ('espn.com', function () {...});
  request.get ('news.ycombinator.com', function () {...});
});

Depois disso, o rastreador continua o processo usando os links espn.com e news.ycombinator.com para continuar rastreando.

Aqui está um código recursivo para fazer isso:

var request = require ('solicitação');
função crawlUrl (url) {
  request.get (URL, função (erro, resposta, corpo) {
    var linkUrls = getLinkUrls (corpo);
    linkUrls.forEach (function (linkUrl) {
      crawlUrl (linkUrl);
    });
  });
}
crawlUrl ('reddit.com');

O que aconteceria se o corpo da resposta fosse assim:


  
    
    
  
  
    
  

Bem, não há tags a seguir. Além disso, essa página da Web parece bem branda, portanto, provavelmente não queremos priorizá-la quando mostrarmos resultados de pesquisa.

Mal sabe o rastreador, o Client Side Framework está prestes a preencher

com um monte de conteúdo incrível.

É por isso que a renderização do lado do cliente pode ser ruim para o SEO.

Pré-renderização

Em 2009, o Google introduziu uma maneira de contornar isso.

https://webmasters.googleblog.com/2009/10/proposal-for-making-ajax-crawlable.html

Quando o rastreador encontrar o site www.example.com/page?query#!mystate, ele será convertido em www.example.com/page?query&_escaped_fragment_=mystate. Dessa forma, quando seu servidor recebe uma solicitação com _escaped_fragment_, ele sabe que a solicitação é proveniente de um rastreador, não de um ser humano.

Lembre-se - o servidor deseja que o rastreador veja

...
(com o conteúdo contido), não
. Então:

  • Quando a solicitação vem de um rastreador, podemos servir
    ...
    .
  • Quando a solicitação vem de um ser humano comum, podemos servir
    e deixar o JavaScript inserir conteúdo.

No entanto, há um problema: o servidor não sabe o que vai acontecer dentro do

. Para descobrir o que está dentro, é necessário executar o JavaScript, criar um DOM e manipular esse DOM. Como os servidores da web tradicionais não sabem como fazer isso, eles empregam um serviço conhecido como Navegador sem Cabeça para fazer isso.

Rastreadores mais inteligentes

Seis anos depois, o Google anunciou que seu rastreador subiu de nível! Quando o Crawler 2.0, vê as tags