Render sisi klien vs rendering sisi server

Awalnya, kerangka kerja web memiliki tampilan yang diberikan di server. Sekarang ini terjadi pada klien. Mari kita jelajahi kelebihan dan kekurangan masing-masing pendekatan.

Performa

Dengan rendering sisi server, setiap kali Anda ingin melihat halaman web baru, Anda harus keluar dan mendapatkannya:

Diagram tentang cara kerja rendering sisi server

Ini analog dengan Anda mengemudi ke pasar super setiap kali Anda ingin makan.

Dengan rendering sisi klien, Anda pergi ke pasar super sekali dan menghabiskan 45 menit berkeliling membeli banyak makanan selama sebulan. Lalu, kapan pun Anda ingin makan, Anda cukup membuka kulkas.

Diagram tentang cara kerja rendering sisi klien

Setiap pendekatan memiliki kelebihan dan kekurangan dalam hal kinerja:

  • Dengan rendering sisi klien, pemuatan halaman awal akan lambat. Karena komunikasi melalui jaringan lambat, dan perlu dua putaran ke server sebelum Anda dapat mulai menampilkan konten kepada pengguna. Namun, setelah itu, setiap pemuatan halaman berikutnya akan sangat cepat.
  • Dengan rendering sisi server, pemuatan laman awal tidak akan terlalu lambat. Tapi itu tidak akan cepat. Dan tidak satu pun dari permintaan Anda yang lain.

Untuk lebih spesifik, dengan rendering sisi klien, halaman awal akan terlihat seperti ini:


  
    
    
  
  
    
  

app.js akan memiliki semua halaman HTML dalam JavaScript sebagai string. Sesuatu seperti ini:

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

Kemudian, ketika halaman dimuat, kerangka kerja akan melihat bilah URL, dapatkan string di halaman ['/'], dan masukkan ke

. Juga, ketika Anda mengklik tautan, kerangka kerja akan mencegat acara, memasukkan string baru (katakanlah, halaman ['/ foo']) ke dalam wadah, dan mencegah browser melepaskan permintaan HTTP seperti biasanya.

SEO

Misalkan crawler web kami mulai membuat permintaan untuk reddit.com:

var request = require ('request');
request.get ('reddit.com', function (error, response, body) {
  // Tubuh terlihat seperti ini:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Berita Peretas 
  // ... tag  lainnya ...
});

Perayap kemudian menggunakan hal-hal di badan tanggapan untuk menghasilkan permintaan baru:

var request = require ('request');
request.get ('reddit.com', function (error, response, body) {
  // Tubuh terlihat seperti ini:
  // 
  //  ... 
  // 
  //  ESPN 
  //  Berita Peretas 
  // ... tag  lainnya ...
  request.get ('espn.com', function () {...});
  request.get ('news.ycombinator.com', function () {...});
});

Setelah itu, crawler melanjutkan proses dengan menggunakan tautan di espn.com dan news.ycombinator.com untuk terus merangkak.

Berikut ini beberapa kode rekursif untuk melakukan itu:

var request = require ('request');
function crawlUrl (url) {
  request.get (url, function (error, response, body) {
    var linkUrls = getLinkUrls (body);
    linkUrls.forEach (fungsi (linkUrl) {
      crawlUrl (tautanUrl);
    });
  });
}
crawlUrl ('reddit.com');

Apa yang akan terjadi jika badan respons terlihat seperti ini:


  
    
    
  
  
    
  

Ya, tidak ada tag untuk diikuti. Juga, halaman web ini terlihat cukup hambar, jadi kami mungkin tidak ingin memprioritaskannya saat kami menampilkan hasil pencarian.

Sedikit yang diketahui perayap, Kerangka Sisi Klien akan mengisi

dengan banyak konten yang mengagumkan.

Inilah sebabnya mengapa rendering sisi klien bisa berdampak buruk untuk SEO.

Prapenguraian

Pada 2009, Google memperkenalkan cara untuk mengatasi hal ini.

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

Ketika perayap menemukan www.example.com/page?query#!mystate, itu akan mengubahnya menjadi www.example.com/page?query&_escaped_fragment_=mystate. Dengan cara ini, ketika server Anda mendapatkan permintaan dengan _escaped_fragment_, ia tahu permintaan tersebut berasal dari perayap, bukan manusia.

Ingat - server ingin perayap melihat

...
(dengan konten di dalamnya), bukan
. Sehingga kemudian:

  • Ketika permintaan berasal dari perayap, kami dapat melayani
    ...
    .
  • Ketika permintaan datang dari manusia biasa, kami hanya bisa melayani
    dan membiarkan JavaScript menyisipkan konten di dalamnya.

Namun ada masalah: server tidak tahu apa yang akan masuk ke dalam

. Untuk mengetahui apa yang ada di dalamnya, itu harus menjalankan JavaScript, membuat DOM, dan memanipulasi DOM itu. Karena server web tradisional tidak tahu cara melakukannya, mereka menggunakan layanan yang dikenal sebagai Browser Tanpa Kepala untuk melakukannya.

Perayap yang lebih cerdas

Enam tahun kemudian, Google mengumumkan bahwa perayapnya naik level! Ketika Crawler 2.0, melihat tag