Representació del client respecte de la representació del servidor

Inicialment, els marcs web tenien visualitzacions al servidor. Ara està passant amb el client. Explorem els avantatges i els desavantatges de cada enfocament.

Rendiment

Amb la representació del servidor, sempre que vulgueu veure una pàgina web nova, heu de sortir i obtenir-la:

Esquema de com funciona la representació del costat del servidor

Això és anàleg al que us dirigiu al supermercat cada vegada que vulgueu menjar.

Amb la representació del client, aneu al supermercat una sola i dediqueu 45 minuts a caminar comprant un munt de menjar durant el mes. Aleshores, quan vulgueu menjar, només obriu la nevera.

Esquema de com funciona la representació del client

Cada enfocament té els seus avantatges i desavantatges a l’hora de realitzar:

  • Amb la representació del client, la càrrega inicial de la pàgina serà lenta. Com que la comunicació a través de la xarxa és lenta i es necessiten dos desplaçaments d’anada i tornada al servidor abans de poder començar a mostrar contingut a l’usuari. No obstant això, després d'això, cada càrrega de pàgina posterior serà ràpidament ràpida.
  • Amb la representació del costat del servidor, la càrrega inicial de la pàgina no serà gaire lenta. Però no serà ràpid. I tampoc cap de les vostres altres sol·licituds.

Per ser més específic, amb la representació del costat del client, la pàgina inicial tindrà un aspecte així:


  
    
    
  
  
    
  

app.js tindrà totes les pàgines HTML en JavaScript com a cadenes. Alguna cosa com això:

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

A continuació, quan es carregui la pàgina, el marc es fixarà en la barra d’URL, obtindrà la cadena a les pàgines ['/'] i la inserirà a

. A més, quan feu clic a enllaços, el marc interceptarà l'esdeveniment, inserirà la nova cadena (per exemple, les pàgines ['/ foo']) al contenidor i evitarà que el navegador dispari la sol·licitud HTTP com sol fer-ho normalment.

SEO

Suposem que el nostre rastrejador web comença a fer una sol·licitud per a reddit.com:

var request = requerir ('sol·licitud');
request.get ('reddit.com', funció (error, resposta, cos) {
  // body sembla una cosa així:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Hacker News 
  // ... altres etiquetes  ...
});

El rastrejador utilitza les coses al cos de resposta per generar noves sol·licituds:

var request = requerir ('sol·licitud');
request.get ('reddit.com', funció (error, resposta, cos) {
  // body sembla una cosa així:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Hacker News 
  // ... altres etiquetes  ...
  request.get ('espn.com', function () {...});
  request.get ('news.ycombinator.com', function () {...});
});

Després d'això, el rastrejador continua el procés mitjançant els enllaços a espn.com i news.ycombinator.com per seguir rastrejant.

Aquí hi ha un codi recursiu per fer-ho:

var request = requerir ('sol·licitud');
function crawlUrl (url) {
  request.get (url, funció (error, resposta, cos) {
    var linkUrls = getLinkUrls (cos);
    linkUrls.forEach (funció (linkUrl) {
      crawlUrl (linkUrl);
    });
  });
}
crawlUrl ('reddit.com');

Què passaria si el cos de resposta semblés així:


  
    
    
  
  
    
  

Bé, no hi ha cap etiqueta a seguir. A més, aquesta pàgina web sembla bastant sord, per la qual cosa probablement no voldrem prioritzar-la quan mostrem els resultats de la cerca.

Poc sap el rastrejador, Client Side Framework està a punt d’omplir

amb un munt de contingut impressionant.

Per això, la representació del client pot ser dolenta per a SEO.

Pre-entrega

El 2009, Google va introduir una manera d’aconseguir-ho.

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

Quan el rastrejador es troba a www.example.com/page?query#!mystate, el convertiria a www.example.com/page?query&_escaped_fragment_=mystate. D’aquesta manera, quan el vostre servidor rep una sol·licitud amb _escaped_fragment_, sap que la sol·licitud prové d’un rastrejador, no d’un humà.

Recordeu-ho: el servidor vol que el rastrejador vegi

...
(amb el contingut a dins), no
. Llavors:

  • Quan la sol·licitud prové d’un rastrejador, podríem servir
    ...
    .
  • Quan la sol·licitud prové d'un humà habitual, només podríem servir
    i deixar que el JavaScript inserís el contingut al seu interior.

Hi ha un problema però: el servidor no sap què passarà dins del

. Per esbrinar què hi ha dins, haureu d’executar el JavaScript, crear un DOM i manipular-lo. Atès que els servidors web tradicionals no saben fer-ho, utilitzen un servei conegut com a Explorador sense cap.

Rastrejadors més intel·ligents

Sis anys després, Google va anunciar que el seu rastrejador va augmentar. Quan Crawler 2.0, veu etiquetes