Pateikimas kliento pusėje ir serverio pusės pateikimas

Iš pradžių žiniatinklio rėmuose rodiniai buvo pateikiami serveryje. Dabar tai vyksta su klientu. Panagrinėkime kiekvieno požiūrio pranašumus ir trūkumus.

Spektaklis

Pateikdami serverio pusę, kiekvieną kartą norėdami pamatyti naują tinklalapį, turite išeiti ir jį gauti:

Tai yra analogiška jums važiuojant į prekybos centrą kiekvieną kartą, kai norite valgyti.

Pateikdami klientų aptarnavimą, jūs vieną kartą einate į prekybos centrą ir praleidžiate 45 minutes, per mėnesį pirkdami krūvą maisto. Tada, kai tik norite valgyti, tiesiog atidarote šaldytuvą.

Kiekvienas požiūris turi savo privalumų ir trūkumų, susijusių su rezultatais:

• Pateikiant kliento pusę, pradinis puslapio įkėlimas bus lėtas. Kadangi ryšys tinkle vyksta lėtai ir norint pradėti rodyti turinį vartotojui, serveris užtrunka du kartus. Tačiau po to kiekvienas paskesnis puslapis bus įkeltas nepaprastai greitai.
• Pateikiant serverio pusę, pradinis puslapio įkėlimas nebus labai lėtas. Bet tai nebus greita. Ir nė vienas iš jūsų kitų prašymų nebus.

Tiksliau sakant, pateikiant kliento pusę, pradinis puslapis atrodys maždaug taip:

„app.js“ turės visus HTML puslapius „JavaScript“ kaip eilutes. Kažkas panašaus į tai:

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

Tada, kai puslapis bus įkeltas, sistema pažvelgs į URL juostą, gaus eilutę puslapiuose ['/'] ir įterps į

. Be to, kai spustelėsite nuorodas, sistema perims įvykį, įterps naują eilutę (tarkime, puslapius ['/ foo']) į talpyklą ir neleis naršyklei suaktyvinti HTTP užklausos, kaip paprastai.

SEO

Tarkime, kad mūsų interneto tikrinimo programa pradeda teikti užklausą reddit.com:

var request = reikalauti ('prašyti');
request.get („reddit.com“, funkcija (klaida, atsakymas, turinys) {
  // kūnas atrodo maždaug taip:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Piratų naujienos 
  // ... kitos  žymės ...
});

Tikrinimo įrenginys naudoja medžiagą atsakymo kūne naujoms užklausoms generuoti:

var request = reikalauti ('request');
request.get ('reddit.com', funkcija (klaida, atsakymas, turinys) {
  // kūnas atrodo maždaug taip:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Piratų naujienos 
  // ... kitos  žymės ...

  request.get ('espn.com', funkcija () {...});
  request.get ('naujienos.ycombinator.com', funkcija () {...});
});

Po to nuskaitymo įrenginys tęsia procesą naudodamas saitus espn.com ir news.ycombinator.com, kad galėtų nuskaityti.

Štai keletas rekursinių kodų, kaip tai padaryti:

var request = reikalauti ('prašyti');

funkcijos nuskaitymasUrl (URL) {
  request.get (URL, funkcija (klaida, atsakymas, turinys) {
    var linkUrls = getLinkUrls (kūnas);

    linkUrls.forEach (funkcija (linkUrl) {
      nuskaitytiUrl (linkUrl);
    });
  });
}

„crawlUrl“ (‘reddit.com’);

Kas nutiktų, jei atsakymo įstaiga atrodytų taip:

Na, nėra žymų, kurių būtų galima laikytis. Be to, šis puslapis atrodo gana nuobodus, todėl tikriausiai nenorėsime, kad jam teiktume pirmenybę, kai rodome paieškos rezultatus.

Tikrintuvas mažai žino, „Client Side Framework“ užpildys

daugybę nepaprasto turinio.

Štai kodėl pateikimas kliento pusėje gali pakenkti SEO.

Išankstinis pateikimas

2009 m. „Google“ pristatė būdą, kaip tai išvengti.

Kai tikrinimo įrenginys aptinkamas www.example.com/page?query#!mystate, jis jį konvertuoja į www.example.com/page?query&_escaped_fragment_=mystate. Tokiu būdu, kai jūsų serveris gauna užklausą su _escaped_fragment_, jis žino, kad užklausą teikia tikrintuvas, o ne žmogus.

Atminkite - serveris nori, kad tikrinimo įrenginys matytų

...

(turinio viduje), o ne

. Taigi tada:

• Kai užklausą pateikia tikrinimo įrenginys, mes galėtume aptarnauti
  ...
  .
• Kai užklausą pateikia paprastas žmogus, mes galime tiesiog aptarnauti
  ir leisti „JavaScript“ įterpti turinį.

Vis dėlto yra problema: serveris nežino, kas bus

. Norėdami išsiaiškinti, kas vyksta viduje, turėtumėte paleisti „JavaScript“, sukurti DOM ir manipuliuoti tuo DOM. Kadangi tradiciniai interneto serveriai nežino, kaip tai padaryti, jie naudojasi paslauga, vadinama „Headless Browser“.

Protingesni skaitytuvai

Po šešerių metų „Google“ paskelbė, kad jos tikrinimo programa išsilygino! Kai tikrintuvas 2.0 mato