Vykreslování na straně klienta vs. vykreslování na straně serveru

Zpočátku byly webové rámce vykreslovány na serveru. Teď se to děje na klientovi. Pojďme prozkoumat výhody a nevýhody každého přístupu.

Výkon

Při vykreslování na straně serveru musíte kdykoli vidět novou webovou stránku, musíte jít ven a získat ji:

To je obdobou toho, jak jedete na super trh pokaždé, když chcete jíst.

Díky vykreslování na straně klienta jdete jednou na super trh a strávíte 45 minut pěšky kolem nákupu spoustu jídla za měsíc. Poté, kdykoli budete chtít jíst, stačí otevřít ledničku.

Každý přístup má své výhody a nevýhody, pokud jde o výkon:

• Při vykreslování na straně klienta bude počáteční načítání stránky pomalé. Protože komunikace přes síť je pomalá a před zahájením zobrazování obsahu uživateli trvá dva zpáteční cesty na server. Poté však bude každé další načtení stránky nesmírně rychlé.
• Při vykreslování na straně serveru nebude počáteční načítání stránky příliš pomalé. Ale nebude to rychlé. A ani jedna z vašich dalších žádostí nebude.

Abychom byli konkrétnější, při vykreslování na straně klienta bude úvodní stránka vypadat asi takto:

app.js bude mít všechny stránky HTML v JavaScriptu jako řetězce. Něco takového:

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

Po načtení stránky se rámec podívá na lištu URL, získá řetězec na stránkách ['/'] a vloží jej do

. Když kliknete na odkazy, rámec také zachytí událost, vloží nový řetězec (řekněme stránky ['/ foo']) do kontejneru a zabrání prohlížeči v spuštění požadavku HTTP, jako obvykle.

SEO

Předpokládejme, že náš webový prolézací modul začne podávat žádost o reddit.com:

var request = vyžádat ('žádost');
request.get ('reddit.com', funkce (chyba, odpověď, tělo) {
  // tělo vypadá takto:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Hacker News 
  // ... další  značky ...
});

Prohledávač potom použije věci v těle odpovědi k vygenerování nových požadavků:

var request = vyžádat ('žádost');
request.get ('reddit.com', funkce (chyba, odpověď, tělo) {
  // tělo vypadá takto:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Hacker News 
  // ... další  značky ...

  request.get ('espn.com', function () {...});
  request.get ('news.ycombinator.com', function () {...});
});

Poté prolézací modul pokračuje v procesu pomocí odkazů na adrese espn.com a news.ycombinator.com, aby mohl procházet.

Zde je několik rekurzivních kódů:

var request = vyžádat ('žádost');

function crawlUrl (url) {
  request.get (url, function (error, response, body) {
    var linkUrls = getLinkUrls (body);

    linkUrls.forEach (function (linkUrl) {
      crawlUrl (linkUrl);
    });
  });
}

crawlUrl ('reddit.com');

Co by se stalo, kdyby tělo odpovědi vypadalo takto:

Neexistují žádné značky, které by se měly řídit. Tato webová stránka také vypadá docela nevýrazně, takže ji pravděpodobně nebudeme chtít upřednostňovat, když zobrazujeme výsledky vyhledávání.

Prohledávač málo ví, že Client Side Framework se chystá naplnit

spoustou úžasného obsahu.

Z tohoto důvodu může být vykreslování na straně klienta pro SEO špatné.

Šlechtění

V roce 2009 společnost Google představila způsob, jak to obejít.

Když prolézací modul narazí na adresu www.example.com/page?query#!mystate, převede jej na www.example.com/page?query&_escaped_fragment_=mystate. Tímto způsobem, když váš server obdrží požadavek s _escaped_fragment_, ví, že žádost přichází z prolézacího modulu, nikoli z člověka.

Pamatujte - server požaduje, aby prolézací modul viděl

...

(s obsahem uvnitř), nikoli

. Takže:

• Když žádost pochází z prolézacího modulu, můžeme obsloužit
  ...
  .
• Když žádost přijde od běžného člověka, mohli bychom jen obsluhovat
  a nechat JavaScript vložit obsah dovnitř.

Je tu však problém: server neví, co se chystá uvnitř

. Abychom zjistili, co jde dovnitř, musí spustit JavaScript, vytvořit DOM a manipulovat s touto DOM. Protože tradiční webové servery to neumí, používají k tomu službu známou jako Bezhlavý prohlížeč.

Chytřejší prohledávače

O šest let později společnost Google oznámila, že se jeho prolézací modul vylepšil! Když prohledávač 2.0 uvidí značky