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

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

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

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

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

С рендеринга от страна на клиента, веднъж отивате на супер пазара и прекарвате 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 въведе начин да заобиколи това.

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

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

...

(със съдържанието вътре), а не

. Така че след това:

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

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

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

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

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