ক্লায়েন্ট-সাইড রেন্ডারিং বনাম সার্ভার-সাইড রেন্ডারিং

প্রাথমিকভাবে, ওয়েব ফ্রেমওয়ার্কগুলির সার্ভারে রেন্ডার ভিউ ছিল। এখন এটি ক্লায়েন্টের উপর ঘটছে। আসুন প্রতিটি পদ্ধতির সুবিধা এবং অসুবিধাগুলি ঘুরে দেখি।

কর্মক্ষমতা

সার্ভার-সাইড রেন্ডারিং সহ, আপনি যখনই কোনও নতুন ওয়েব পৃষ্ঠা দেখতে চান, আপনাকে বাইরে বেরিয়ে আসতে হবে:

সার্ভার-সাইড রেন্ডারিং কীভাবে কাজ করে তার ডায়াগ্রাম

আপনি যখনই খেতে চান প্রতিবার সুপার মার্কেটে গাড়ি চালানো এটি আপনার কাছে অভিন্ন।

ক্লায়েন্ট-সাইড রেন্ডারিংয়ের সাথে আপনি একবার সুপার মার্কেটে যান এবং মাসের জন্য একগুচ্ছ খাবার কিনে 45 মিনিট সময় ব্যয় করেন। তারপরে, যখনই আপনি খেতে চান, আপনি কেবল ফ্রিজটি খুলুন।

ক্লায়েন্ট-সাইড রেন্ডারিং কীভাবে কাজ করে তার ডায়াগ্রাম

পারফরম্যান্সের ক্ষেত্রে প্রতিটি পদ্ধতির তার সুবিধা এবং অসুবিধা রয়েছে:

  • ক্লায়েন্ট-সাইড রেন্ডারিংয়ের সাথে, প্রাথমিক পৃষ্ঠা লোডটি ধীর হতে চলেছে। কারণ নেটওয়ার্কের মাধ্যমে যোগাযোগ করা ধীর গতিতে এবং আপনি ব্যবহারকারীর কাছে সামগ্রী প্রদর্শন করা শুরু করার আগে এটি সার্ভারে দুটি রাউন্ড ট্রিপ নেয়। যাইহোক, এর পরে, পরবর্তী প্রতিটি পৃষ্ঠা লোড দ্রুতগতিতে দ্রুত হবে।
  • সার্ভার-সাইড রেন্ডারিংয়ের সাথে, প্রাথমিক পৃষ্ঠা লোড মারাত্মকভাবে ধীর হবে না। তবে এটি দ্রুত হবে না। এবং আপনার অন্য অনুরোধগুলির কোনওটিই গ্রহণ করবে না।

ক্লায়েন্ট-সাইড রেন্ডারিং সহ আরও সুনির্দিষ্ট হওয়ার জন্য, প্রাথমিক পৃষ্ঠাটি এর মতো দেখতে পাবেন:


   -এর
    <স্ক্রিপ্ট src = "ক্লায়েন্ট-সাইড-ফ্রেমওয়ার্ক.js"> 
    <স্ক্রিপ্ট src = "app.js"> 
   এর
   এর
    <ডি ক্লাস = "ধারক"> 
   এর

app.js এ জাভাস্ক্রিপ্টের সমস্ত HTML পৃষ্ঠা স্ট্রিং হিসাবে থাকবে। এটার মতো কিছু:

var পৃষ্ঠাগুলি = {
  '/': ' ... ',
  '/ foo': ' ... ',
  '/ বার': ' ... ',
};

তারপরে পৃষ্ঠাটি লোড হয়ে গেলে ফ্রেমওয়ার্কটি ইউআরএল বারের দিকে নজর দেবে, পৃষ্ঠাগুলিতে স্ট্রিং ['/'] পাবে এবং এটিকে

এ sertোকানো হবে। এছাড়াও, যখন আপনি লিঙ্কগুলিতে ক্লিক করেন, ফ্রেমওয়ার্কটি ইভেন্টটিকে বাধা দেয়, ধারকটিতে নতুন স্ট্রিং (বলুন, পৃষ্ঠা ['/ foo']) সন্নিবেশ করবে এবং ব্রাউজারটি HTTP অনুরোধটিকে সাধারণত এটির মতো গুলি ছড়িয়ে দেবে না।

এসইও

মনে করুন আমাদের ওয়েব ক্রলার reddit.com এর জন্য একটি অনুরোধ করা শুরু করে:

var অনুরোধ = প্রয়োজনীয় ('অনুরোধ');
অনুরোধ.get ('reddit.com', ফাংশন (ত্রুটি, প্রতিক্রিয়া, দেহ))
  // শরীরটি দেখতে এরকম কিছু দেখাচ্ছে:
  // 
  // <মাথা> ... 
  // 
  //  ESPN 
  //  হ্যাকার নিউজ 
  // ... অন্যান্য  ট্যাগগুলি ...
});

ক্রলার তারপরে নতুন অনুরোধগুলি তৈরি করতে প্রতিক্রিয়ার বডি স্টাফ ব্যবহার করে:

var অনুরোধ = প্রয়োজনীয় ('অনুরোধ');
অনুরোধ.get ('reddit.com', ফাংশন (ত্রুটি, প্রতিক্রিয়া, দেহ))
  // শরীরটি দেখতে এরকম কিছু দেখাচ্ছে:
  // 
  // <মাথা> ... 
  // 
  //  ESPN 
  //  হ্যাকার নিউজ 
  // ... অন্যান্য  ট্যাগগুলি ...
  অনুরোধ.get ('espn.com', ফাংশন () {...});
  অনুরোধ।
});

এর পরে, ক্রলিং ক্রলিং চালিয়ে যেতে espn.com এবং নিউজ.একম্বিনেটর ডটকমের লিঙ্কগুলি ব্যবহার করে প্রক্রিয়াটি চালিয়ে যায়।

এটি করার জন্য এখানে কিছু পুনরাবৃত্ত কোড রয়েছে:

var অনুরোধ = প্রয়োজনীয় ('অনুরোধ');
ফাংশন হামাগুড়ি (url) {
  অনুরোধ.get (ইউআরএল, ফাংশন (ত্রুটি, প্রতিক্রিয়া, শরীর))
    var linkUrls = getLinkUrls (বডি);
    linkUrls.forEach (ফাংশন (linkUrl) {
      crawlUrl (linkUrl);
    });
  });
}
crawlUrl ( 'reddit.com');

প্রতিক্রিয়া সংস্থাটি এরকম দেখলে কী হবে:


   -এর
    <স্ক্রিপ্ট src = "ক্লায়েন্ট-সাইড-ফ্রেমওয়ার্ক.js"> 
    <স্ক্রিপ্ট src = "app.js"> 
   এর
   এর
    <ডি ক্লাস = "ধারক"> 
   এর

ভাল, অনুসরণ করার জন্য কোনও ট্যাগ নেই। এছাড়াও, এই ওয়েবপৃষ্ঠাটি বেশ জটলা দেখাচ্ছে, তাই আমরা যখন অনুসন্ধানের ফলাফল দেখাব তখন সম্ভবত আমরা এটিকে অগ্রাধিকার দিতে চাই না।

ক্রলারের খুব কমই জানা নেই, ক্লায়েন্ট সাইড ফ্রেমওয়ার্ক একগুচ্ছ অসাধারণ সামগ্রী দিয়ে <ডি ক্লাস = "ধারক">

পূরণ করবে।

এজন্য ক্লায়েন্ট-সাইড রেন্ডারিং SEO এর পক্ষে খারাপ হতে পারে।

প্রিরেন্ডারিং

২০০৯ সালে গুগল এটিকে ঘিরে যাওয়ার একটি উপায় চালু করে।

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_fraament_- এর সাথে একটি অনুরোধ পেয়েছে, তখন এটি জানে যে অনুরোধটি কোনও ক্রলার থেকে এসেছিল, কোনও মানবিক নয়।

মনে রাখবেন - সার্ভারটি ক্রোলারকে <ডি ক্লাস = "ধারক"> ... (ভিতরে থাকা সামগ্রী সহ) দেখতে চায়, <ডি ক্লাস = "ধারক">

নয়। তাহলে:

  • অনুরোধটি যখন ক্রলার থেকে আসে, আমরা
    ... সরবরাহ করতে পারি।
  • যখন অনুরোধটি কোনও নিয়মিত মানুষের কাছ থেকে আসে, আমরা কেবল <ডি ক্লাস = "ধারক">
পরিবেশন করতে পারি এবং জাভাস্ক্রিপ্টকে সামগ্রীটি ভিতরে letোকাতে দিন।

যদিও এখানে একটি সমস্যা রয়েছে: <ডি ক্লাস = "ধারক">

এর ভিতরে কী যেতে হবে তা সার্ভার জানে না। ভিতরে কী আছে তা নির্ধারণ করার জন্য, এটি জাভাস্ক্রিপ্ট চালাতে হবে, একটি ডিওএম তৈরি করতে হবে এবং সেই ডিওএম চালিত করতে হবে। যেহেতু traditionalতিহ্যবাহী ওয়েব সার্ভারগুলি কীভাবে এটি করতে হয় তা জানে না, তারা এটি করতে একটি হেডলেস ব্রাউজার হিসাবে পরিচিত একটি পরিষেবা নিযুক্ত করে।

বুদ্ধিমান হামাগুড়ি

ছয় বছর পরে, গুগল ঘোষণা করেছে যে এটির ক্রলার সমতল করা হয়েছে! যখন ক্রোলার ২.০, <স্ক্রিপ্ট> ট্যাগগুলি দেখেন, এটি আসলে একটি অনুরোধ করে, কোড চালায় এবং ডিওএম চালিত করে। ঠিক একটি ওয়েব ব্রাউজারের মতো।

সুতরাং কেবল দেখার পরিবর্তে:

<ডি ক্লাস = "ধারক"> 

এটি দেখেছে:

<ডি ক্লাস = "ধারক">
  ...
  ...
  ...
  ...
  ...

কোনও নির্দিষ্ট ইউআরএল দেখার সময় গুগলের ক্রলার কী দেখে তা নির্ধারণ করতে আপনি গুগল হিসাবে আনতে ব্যবহার করতে পারেন।

ঘোষণা থেকে প্রাসঙ্গিক অংশ:

তারপরে, আমাদের সিস্টেমগুলি ব্যবহারকারীদের কাছে সামগ্রী উপস্থাপন করতে জাভাস্ক্রিপ্ট ব্যবহার করা পৃষ্ঠাগুলি রেন্ডার এবং বুঝতে সক্ষম হয় নি। যেহেতু "ক্রলাররা ... [কোনও] গতিশীলভাবে তৈরি করা কোনও সামগ্রী দেখতে সক্ষম ছিল না", আমরা ওয়েবমাস্টাররা তাদের এজেএক্স-ভিত্তিক অ্যাপ্লিকেশনগুলিকে অনুসন্ধান ইঞ্জিন দ্বারা সূচিবদ্ধ করে রাখতে যাতে অনুসরণ করতে পারে সেগুলির একটি সেট প্রস্তাব করেছিলাম proposed
সময় বদলেছে। আজ, যতক্ষণ না আপনি গুগলবোটকে আপনার জাভাস্ক্রিপ্ট বা সিএসএস ফাইল ক্রলিং থেকে আটকাচ্ছেন না, আমরা সাধারণত আপনার ওয়েব পৃষ্ঠাগুলি আধুনিক ব্রাউজারগুলির রেন্ডার এবং বুঝতে সক্ষম হয়েছি।

কম স্মার্ট ক্রলারগুলি

দুর্ভাগ্যক্রমে, গুগল একমাত্র অনুসন্ধান ইঞ্জিন নয়। এছাড়াও বিং, ইয়াহু, হাঁস হাঁস গো, বাইদু ইত্যাদি রয়েছে Yes হ্যাঁ, লোকেরা আসলে এই অনুসন্ধান ইঞ্জিনগুলিও ব্যবহার করে।

https://www.netmarketshare.com/search-engine-market-share.aspx?qprid=4&qpcustomd=0

অন্যান্য অনুসন্ধান ইঞ্জিনগুলি জাভাস্ক্রিপ্ট পরিচালনা করতে তেমন ভাল নয়। এসইও বনাম দেখুন act প্রতিক্রিয়া: আরও তথ্যের জন্য ওয়েব ক্রলারগুলি আপনার চেয়ে বেশি স্মার্ট।

দুই ভুবনের সেরা

উভয় পৃথিবীর সেরা পেতে, আপনি নিম্নলিখিতগুলি করতে পারেন:

  1. প্রথম পৃষ্ঠা লোডের জন্য সার্ভার-সাইড রেন্ডারিং ব্যবহার করুন।
  2. পরবর্তী সমস্ত পৃষ্ঠা লোডের জন্য ক্লায়েন্ট-সাইড রেন্ডারিং ব্যবহার করুন।

এর প্রভাবগুলি কী তা বিবেচনা করুন:

তবে এটি সার্ভারে সেট আপ করতে কিছুটা সময় নেয়। জটিলতা আছে।

কৌণিক, প্রতিক্রিয়া এবং আম্বার সকলেই এই পদ্ধতির দিকে চলে গেছে।

আলোচনা

প্রথমে কিছু বিষয় বিবেচনা করুন:

https://www.slideshare.net/phaithful/seo-and-js-new-challenges

এই সমস্ত বলেছে, আমি বিশ্বাস করি যে বেশিরভাগ ক্ষেত্রে, এটি কেআইএসএসের পক্ষে সেরা এবং কেবল সার্ভার-সাইড রেন্ডারিংয়ের সাথে যেতে পারে। মনে রাখবেন:

আপনার বেশিরভাগ ব্যবহারকারীর কাছে শালীন ইন্টারনেট সংযোগ থাকবে এবং এটি যথেষ্ট দ্রুত হবে। বিশেষত যদি আপনি ম্যাকবুক প্রোগুলির সাথে ইউপিজকে টার্গেট করছেন। আপনাকে মারাত্মক দীর্ঘ প্রাথমিক লোড সময় সম্পর্কে চিন্তা করতে হবে না যার ফলে আপনি ব্যবহারকারীদের হারাতে পারেন। ব্যবহারযোগ্যতার সমস্যাগুলির বিষয়ে আপনাকে ভাবতে হবে না যেখানে ব্যবহারকারীরা লক্ষ্য করেন না যে কোনও লিঙ্ক ক্লিক করার সময় কোনও নতুন পৃষ্ঠা আসলে লোড হয়েছে।

তবে, প্রাথমিক পৃষ্ঠা লোডে সার্ভার-সাইড রেন্ডারিংয়ের সাথে ক্লায়েন্ট-সাইড রেন্ডারিংয়ের জন্য অবশ্যই কিছু ক্ষেত্রে ব্যবহার রয়েছে। বড় বড় সংস্থাগুলির ক্ষেত্রে প্রায়শই এটি ঘটে যায় যে # সুপারফ্যাটার্স, আপনার ধীর ইন্টারনেট সংযোগের ব্যবহারকারী রয়েছে এবং অপ্টিমাইজেশনে সময় দেওয়ার জন্য আপনার যথেষ্ট পরিমাণে ইঞ্জিনিয়ারিং দল রয়েছে have

ভবিষ্যতে, আমি আশা করি যে এই আইসোমরফিক ওয়েব ফ্রেমওয়ার্কগুলি (যা প্রাথমিক পৃষ্ঠার লোডটিতে সার্ভার-সাইড রেন্ডারিংয়ের সাথে ক্লায়েন্ট-সাইড রেন্ডারিং করে) আরও স্থিতিশীল এবং সহজেই ব্যবহারযোগ্য হয়ে উঠবে expect এই মুহুর্তে, সম্ভবত যুক্ত জটিলতা ন্যূনতম হবে। যাইহোক, আজ, এই সমস্ত খুব নতুন, এবং আমি আশা করি সেখানে প্রচুর ফাঁস হওয়া বিমূর্ততা থাকবে। ভবিষ্যতে আরও, আমি আশা করি ইন্টারনেট সংযোগটি যথেষ্ট ভাল হয়ে উঠবে যেখানে ক্লায়েন্ট-সাইড রেন্ডারিংয়ের দরকার নেই, এবং এইভাবে সারণীগুলি সার্ভার-সাইড রেন্ডারিংয়ে ফিরে যাবে।

আরো দেখুন

টেভ বনাম 17 হটman utd vs derbyডাব্লুডব্লিউই এর মানি ইন ব্যাঙ্ক '16 বনাম। টিএনএ'র স্ল্যামেবারিয়ার্স 16: কোন প্রো রেসলিং পিপিভিতে আরও ভাল কার্ড আছে?লিঙ্কন নেভিগেটর বনাম মহাদেশীয়এস কর্পোরেশন এর উপকারিতা এবং কনসসম্পত্তি কর ওরেগন বনাম ক্যালিফোর্নিয়াcointreau বনাম ট্রিপল সেকেন্ডতাইওয়ান বনাম চীন সংস্কৃতি

আরো দেখুন

স্কাইমিনার বনাম বিটকয়েন মাইনার - একটি তুলনাইউএক্স বনাম ইউআই বনাম আইএ বনাম আইএক্সডি: 4 বিভ্রান্তিমূলক ডিজিটাল ডিজাইনের শর্তাদি ব্যাখ্যা করা হয়েছেবি 2 বি বনাম বি 2 সি বনাম বি 2 বি 2 সিনিঃসঙ্গতা বনাম নির্জনতাপ্রদত্ত কাজ বনাম আপনার নিজস্ব কাজইথেরিয়াম বনাম জিনফিন: কোন নিবন্ধটি পড়ার পরে আপনি কোন স্মার্ট চুক্তি ব্লকচেইন পছন্দ করবেন?সিস্টেম বনাম লক্ষ্যগুলিমেটামাস্ক ল্যাবগুলি মুস্টেকালা— হালকা ক্লায়েন্ট উপস্থাপন করে যা ডেটা বীজ করে।