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:

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.

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.

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