Asiakaspuolen renderointi vs. palvelinpuolen renderointi

Aluksi verkkokehyksissä näkymät esitettiin palvelimella. Nyt se tapahtuu asiakkaassa. Tutkitaan kunkin lähestymistavan etuja ja haittoja.

Esitys

Palvelinpuolen renderoinnin avulla sinun on poistuttava ja hankittava se aina, kun haluat nähdä uuden verkkosivun:

Kaavio palvelinpuolen renderoinnin toiminnasta

Tämä on samanlainen kuin ajat supermarkkinoille aina kun haluat syödä.

Asiakaspuolen renderoinnin avulla voit mennä kerran supermarkkinoille ja viettää 45 minuuttia kävellen ostamalla joukon ruokia kuukaudelle. Sitten, kun haluat syödä, avaa vain jääkaappi.

Kaavio siitä, kuinka asiakaspuolen renderointi toimii

Jokaisella lähestymistavalla on edut ja haitat suorituskyvyn suhteen:

  • Asiakaspuolen renderoinnin yhteydessä sivun alkuperäinen lataus tulee olemaan hidasta. Koska kommunikointi verkon kautta on hidasta, ja se vie kaksi edestakaista palvelinta, ennen kuin voit alkaa näyttää sisältöä käyttäjälle. Sen jälkeen jokainen seuraava sivukuormitus on kuitenkin uskomattoman nopeaa.
  • Palvelinpuolen renderöinnillä sivun alkulataus ei ole kovin hidasta. Mutta se ei tule nopeasti. Eikä mikään muu pyyntösi.

Tarkemmin sanottuna asiakaspuolen renderoinnilla aloitussivu näyttää tältä:


  
    
    
  
  
    
  

app.js sisältää kaikki HTML-sivut JavaScriptinä merkkijonoina. Jotain tällaista:

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

Sitten, kun sivu ladataan, kehys tarkastelee URL-palkkia, saa merkkijonon sivuilta ['/'] ja lisää sen

-osaan. Kun napsautat linkkejä, kehys sieppaa tapahtuman, lisää uuden merkkijonon (esimerkiksi sivut ['/ foo']) säilöön ja estää selainta käynnistämästä HTTP-pyyntöä kuten tavallisesti.

SEO

Oletetaan, että indeksointirobotimme aloittaa pyynnön reddit.com: lle:

var pyyntö = vaadi ('pyyntö');
request.get ('reddit.com', toiminto (virhe, vastaus, runko) {
  // vartalo näyttää noin:
  // 
  //  ... 
  // 
  //  ESPN 
  //  hakkeriuutiset 
  // ... muut  tunnisteet ...
});

Indeksoija käyttää sitten -tavaroita vastauskappaleessa uusien pyyntöjen luomiseen:

var pyyntö = vaadi ('pyyntö');
request.get ('reddit.com', toiminto (virhe, vastaus, runko) {
  // vartalo näyttää noin:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Hakkeriuutiset 
  // ... muut  tunnisteet ...
  request.get ('espn.com', toiminto () {...});
  request.get ('news.ycombinator.com', toiminto () {...});
});

Sen jälkeen indeksoija jatkaa prosessia käyttämällä indeksejä espn.com ja news.ycombinator.com.

Tässä on rekursiivinen koodi tämän tekemiseen:

var pyyntö = vaadi ('pyyntö');
indeksointiUrl (URL) {
  request.get (URL, toiminto (virhe, vastaus, runko) {
    var linkUrls = getLinkUrls (runko);
    linkUrls.forEach (toiminto (linkUrl) {
      crawlUrl (linkUrl);
    });
  });
}
crawlUrl (reddit.com ');

Mitä tapahtuisi, jos vastauselin näyttäisi tältä:


  
    
    
  
  
    
  

No, -tageja ei ole seurattavissa. Lisäksi tämä verkkosivu näyttää melko tyhjältä, joten emme todennäköisesti halua priorisoida sitä, kun näytämme hakutuloksia.

Indeksointirobotti ei juurikaan tiedä, Client Side Framework täyttää

joukolla mahtavaa sisältöä.

Siksi asiakaspuolen renderointi voi olla haitallinen hakukoneoptimoinnille.

esihahmonnuksen

Vuonna 2009 Google esitteli tavan kiertää tämä.

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

Kun indeksointirobotti kohtaa www.example.com/page?query#!mystate, se muuntaa sen www.example.com/page?query&_escaped_fragment_=mystateksi. Tällä tavalla, kun palvelimesi saa pyynnön _escaped_fragment_, se tietää, että pyyntö tulee indeksointirobotista, ei ihmisestä.

Muista - palvelin haluaa indeksointirobotin näkevän

...
(sisällön ollessa sisällä), ei
. Niin sitten:

  • Kun pyyntö tulee indeksoijalta, voimme palvella
    ...
    .
  • Kun pyyntö tulee tavalliselta ihmiseltä, voimme palvella vain
    ja antaa JavaScriptin lisätä sisällön.

On kuitenkin ongelma: palvelin ei tiedä mitä menee

-alueelle. Selvittääksesi mitä sisälle tulee, sen on suoritettava JavaScript, luotava DOM ja manipuloitava sitä. Koska perinteiset verkkopalvelimet eivät osaa tehdä sitä, he käyttävät Headless Browser -nimistä palvelua tehdäkseen niin.

Älykkäämpiä indeksointirobotteja

Kuusi vuotta myöhemmin Google ilmoitti indeksointiroottorinsa tasaantuvan! Kun indeksointirobotti 2.0 näkee