İstemci tarafı oluşturma ve sunucu tarafı oluşturma

Başlangıçta, web çerçeveleri sunucuda oluşturulan görünümlere sahipti. Şimdi müşteri üzerinde oluyor. Her bir yaklaşımın avantajlarını ve dezavantajlarını keşfedelim.

Verim

Sunucu tarafı oluşturma işleminde, ne zaman yeni bir web sayfası görmek isterseniz, çıkıp onu almanız gerekir:

Sunucu tarafı oluşturmanın nasıl çalıştığını gösteren diyagram

Bu, her yemek yemek istediğinizde süper markete gitmenize benzer.

Müşteri tarafı oluşturma ile bir kez süper markete gidersiniz ve 45 dakikalık bir ay boyunca etrafta yiyecek bir şeyler satın alarak dolaşırsınız. Sonra ne zaman yemek istersen, sadece buzdolabını aç.

Müşteri tarafı oluşturmanın nasıl çalıştığını gösteren diyagram

Her yaklaşımın performans söz konusu olduğunda avantaj ve dezavantajları vardır:

  • İstemci tarafı oluşturmada, ilk sayfa yükleme işlemi yavaş olacaktır. Ağ üzerinden iletişim kurmak yavaş olduğundan ve kullanıcıya içerik görüntülemeye başlamadan önce sunucuya iki tur atılması gerekir. Bununla birlikte, bundan sonra, her bir sonraki sayfa yükleme cayır cayır yanan hızlı olacaktır.
  • Sunucu tarafı görüntülemede, ilk sayfa yükleme işlemi çok yavaş olmaz. Ama hızlı olmayacak. Ve diğer hiçbir isteğiniz de olmayacak.

Daha spesifik olmak gerekirse, müşteri tarafı oluşturma ile ilk sayfa şöyle görünecek:


  
    
    
  
  
    
  

app.js JavaScript’teki tüm HTML sayfalarına dizge olarak sahip olacaktır. Bunun gibi bir şey:

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

Ardından, sayfa yüklendiğinde, çerçeve URL çubuğuna bakacak, dizeyi ['/'] sayfalarına getirecek ve

içine yerleştirecektir. Ayrıca, bağlantıları tıklattığınızda, çerçeve olayı engeller, yeni dizeyi (örneğin, sayfa ['/ foo']) kaba ekler ve tarayıcının normalde olduğu gibi HTTP isteğini reddetmesini önler.

SEO

Web tarayıcımızın reddit.com için bir istekte bulunmaya başladığını varsayalım:

var request = request ('request');
request.get ('reddit.com', işlev (hata, yanıt, gövde) {
  // vücut şöyle bir şeye benziyor:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Hacker News 
  // ... diğer  etiketleri ...
});

Tarayıcı daha sonra yeni istekler oluşturmak için yanıt gövdesindeki sayfalarını kullanır:

var request = request ('request');
request.get ('reddit.com', işlev (hata, yanıt, gövde) {
  // vücut şöyle bir şeye benziyor:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Hacker News 
  // ... diğer  etiketleri ...
  request.get ('espn.com', function () {...});
  request.get ('news.ycombinator.com', function () {...});
});

Bundan sonra, tarayıcı, taramaya devam etmek için espn.com ve news.ycombinator.com adresindeki bağlantıları kullanarak işleme devam eder.

İşte bunu yapmak için bazı özyineli kod:

var request = request ('request');
işlev crawlUrl (url) {
  request.get (url, function (hata, yanıt, gövde) {
    var linkUrls = getLinkUrls (gövde);
    linkUrls.forEach (function (linkUrl) {
      crawlUrl (linkurl);
    });
  });
}
crawlUrl ( 'reddit.com');

Yanıt organı böyle gözükse ne olurdu:


  
    
    
  
  
    
  

Peki, izlenecek etiketi yok. Ayrıca, bu web sayfası oldukça yumuşak görünüyor, bu yüzden arama sonuçlarını gösterdiğimizde önceliklendirmek istemiyoruz.

Tarayıcı, çok az şey biliyor mu, Müşteri Tarafı Çerçevesi,

'yi bir sürü harika içerikle doldurmak üzere.

Bu nedenle müşteri tarafı oluşturma SEO için kötü olabilir.

Ön Görüntüleme

2009 yılında, Google bunun üstesinden gelmenin bir yolunu tanıttı.

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

Tarayıcı www.example.com/page?query#!mystate ile karşılaştığında, onu www.example.com/page?query&_escaped_fragment_=mystate biçimine dönüştürür. Bu şekilde, sunucunuz _escaped_fragment_ ile bir istek aldığında, isteğin bir insandan değil, bir tarayıcıdan geldiğini bilir.

Unutmayın - sunucu, tarayıcının

...
(içeriğinde) bulunan
değerini görmesini ister. E sonra:

  • İstek bir tarayıcıdan geldiğinde,
    ...
    hizmetini verebiliriz.
  • Talep normal bir insandan geldiğinde, sadece
    hizmetini sunabilir ve JavaScript’in içine içerik eklemesine izin verebiliriz.

Yine de bir sorun var: sunucu

içine ne gideceğini bilmiyor. İçeri girenin ne olduğunu bulmak için, JavaScript'i çalıştırması, bir DOM oluşturması ve bu DOM'yi değiştirmesi gerekir. Geleneksel web sunucuları bunun nasıl yapılacağını bilmediğinden, bunu yapmak için Başsız Tarayıcı olarak bilinen bir hizmet kullanırlar.

Akıllı tarayıcılar

Altı yıl sonra, Google, tarayıcısının hizalı olduğunu açıkladı! Crawler 2.0,