Клиентиране от страна на клиент спрямо сървър от страна на сървъра

Първоначално уеб рамките имаха изгледи, представени на сървъра. Това се случва с клиента. Нека проучим предимствата и недостатъците на всеки подход.

производителност

При изобразяване от страна на сървъра, винаги когато искате да видите нова уеб страница, трябва да излезете и да я получите:

Диаграма как работи визуализацията от страна на сървъра

Това е аналогично на преминаването към супер пазара всеки път, когато искате да ядете.

С рендеринга от страна на клиента, веднъж отивате на супер пазара и прекарвате 45 минути в разходка, купувайки куп храна за месеца. След това, винаги когато искате да ядете, просто отваряте хладилника.

Диаграма как работи визуализацията от страна на клиента

Всеки подход има своите предимства и недостатъци, що се отнася до ефективността:

  • При изобразяването от страна на клиента първоначалното зареждане на страниците ще бъде бавно. Тъй като комуникацията по мрежата е бавна и са необходими две обиколки до сървъра, преди да можете да започнете да показвате съдържание на потребителя. След това обаче всяко следващо зареждане на страници ще бъде пламтящо бързо.
  • При изобразяване от страна на сървъра първоначалното зареждане на страниците няма да бъде ужасно бавно. Но няма да е бързо. И нито едно от другите ви искания.

За да бъдем по-конкретни, с изобразяването от страна на клиента, началната страница ще изглежда така:


  <Глава>
    
    
  
  <Тяло>
    
  

app.js ще има всички HTML страници в JavaScript като низове. Нещо като това:

вар страници = {
  '/': ' ... ',
  '/ foo': ' ... ',
  '/ bar': ' ... ',
};

След това, когато страницата е заредена, рамката ще разгледа URL лентата, ще вземе низа на страниците ['/'] и ще я вмъкне в

. Освен това, когато щракнете върху връзки, рамката ще пресече събитието, ще вмъкне новия низ (да речем, страници ['/ foo']) в контейнера и ще попречи на браузъра да изтрие HTTP заявката, както обикновено.

SEO

Да предположим, че нашия уеб браузър започва да отправя заявка за reddit.com:

var request = изисквам ('заявка');
request.get ('reddit.com', функция (грешка, отговор, тяло) {
  // body изглежда така:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Hacker News 
  // ... други  тагове ...
});

След това роботът използва неща в тялото за отговор, за да генерира нови заявки:

var request = изисквам ('заявка');
request.get ('reddit.com', функция (грешка, отговор, тяло) {
  // body изглежда така:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Hacker News 
  // ... други  тагове ...
  request.get ('espn.com', функция () {...});
  request.get ('news.ycombinator.com', функция () {...});
});

След това роботът продължава процеса, като използва връзките на espn.com и news.ycombinator.com, за да продължи да обхожда.

Ето някои рекурсивни кодове за това:

var request = изисквам ('заявка');
функция crawlUrl (url) {
  request.get (URL, функция (грешка, отговор, тяло) {
    var linkUrls = getLinkUrls (body);
    linkUrls.forEach (функция (linkUrl) {
      crawlUrl (linkUrl);
    });
  });
}
crawlUrl ( "reddit.com ');

Какво би се случило, ако органът за отговор изглежда така:


  <Глава>
    
    
  
  <Тяло>
    
  

Е, няма тагове, които да следвате. Освен това тази уеб страница изглежда доста нежна, така че вероятно няма да искаме да я даваме приоритет, когато показваме резултати от търсенето.

Малката информация знае, че страничната рамка на клиента е на път да запълни

с куп страхотно съдържание.

Ето защо рендерирането от страна на клиента може да бъде лошо за SEO.

Предварително изобразяване

През 2009 г. Google въведе начин да заобиколи това.

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

Когато роботът попадне на www.example.com/page?query#!mystate, той ще го преобразува в www.example.com/page?query&_escaped_fragment_=mystate. По този начин, когато вашият сървър получи заявка с _escaped_fragment_, той знае, че заявката идва от робот, а не от човек.

Не забравяйте - сървърът иска роботът да види

...
(със съдържанието вътре), а не
. Така че след това:

  • Когато заявката идва от робот, можем да служим
    ...
    .
  • Когато заявката идва от обикновен човек, можем просто да служим
    и да оставим JavaScript да вмъква съдържание вътре.

Има проблем обаче: сървърът не знае какво ще влезе в

. За да разберете какво влиза вътре, трябва да стартирате JavaScript, да създадете DOM и да манипулирате този DOM. Тъй като традиционните уеб сървъри не знаят как да го направят, те използват услуга, известна като Браузър без глава, за да го направят.

По-интелигентни гусенични машини

Шест години по-късно Google обяви, че нейният скатер се изравнява! Когато Crawler 2.0 вижда етикети