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

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

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

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

সুতরাং এটি বোঝা যায় যে সার্ভার-সাইড রেন্ডারিং ধীরে ধীরে ক্লায়েন্ট পক্ষের ওয়েবপৃষ্ঠাগুলি রেন্ডারিংয়ের ক্রমবর্ধমান পদ্ধতিতে একটি ব্যাকসিট নিতে শুরু করেছে।

তাহলে কোন পদ্ধতিটি আরও ভাল বিকল্প? বিকাশের বেশিরভাগ জিনিসগুলির মতো এটি আপনার ওয়েবসাইটের সাথে কী করার পরিকল্পনা করছেন তা নির্ভর করে depends আপনার পক্ষে ভাল এবং কনসগুলি বুঝতে হবে, তবে কোন রাস্তা আপনার পক্ষে সবচেয়ে ভাল তা নিজেই স্থির করুন।

সার্ভার-সাইড রেন্ডারিং কীভাবে কাজ করে

সার্ভার-সাইড রেন্ডারিং হ'ল স্ক্রিনে তথ্য প্রদর্শনের জন্য সর্বাধিক সাধারণ পদ্ধতি। এটি সার্ভারের এইচটিএমএল ফাইলগুলি ব্রাউজারের জন্য ব্যবহারযোগ্য তথ্যে রূপান্তর করে কাজ করে।

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

  • আপনার ইন্টারনেটের গতি
  • সার্ভারের অবস্থান
  • কত ব্যবহারকারী এই সাইটে অ্যাক্সেস করার চেষ্টা করছেন
  • এবং কয়েকটি ওয়েবসাইটের নামকরণ করার জন্য ওয়েবসাইটটি কতটা অনুকূলিত to

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

নতুন পৃষ্ঠায় কেবলমাত্র কয়েকটি আইটেম রয়েছে যা বর্তমান পৃষ্ঠার চেয়ে পৃথক রয়েছে তা বিবেচ্য নয়, ব্রাউজারটি পুরো নতুন পৃষ্ঠাটির জন্য জিজ্ঞাসা করবে এবং গ্রাউন্ড আপ থেকে সমস্ত কিছু পুনরায় রেন্ডার করবে।

উদাহরণস্বরূপ এই এইচটিএমএল ডকুমেন্টটিকে উদাহরণস্বরূপ.টেসটাইট.কমের একটি HTTP ঠিকানা সহ একটি কল্পিত সার্ভারে স্থাপন করা হয়েছে Take



   -এর
    <মেটা চরসেট = "utf-8">
    <শিরোনাম> উদাহরণ ওয়েবসাইট 
   এর
   এর
    

আমার ওয়েবসাইট     

এটি আমার নতুন ওয়েবসাইটের একটি উদাহরণ      লিঙ্ক করুন    এর

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

এখন, ধরে নিন যে আপনি নীচের কোডটি সহ রেন্ডার পৃষ্ঠা থেকে লিঙ্কটি ক্লিক করতে চেয়েছিলেন।



   -এর
    <মেটা চরসেট = "utf-8">
    <শিরোনাম> উদাহরণ ওয়েবসাইট 
   এর
   এর
    

আমার ওয়েবসাইট     

এটি আমার নতুন ওয়েবসাইটের একটি উদাহরণ     

এটি অন্য.html

থেকে আরও কিছু সামগ্রী    এর

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

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

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

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

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

ওয়েবসাইটগুলি রেন্ডারিংয়ের ক্ষেত্রে এটি তুলনামূলকভাবে নতুন পদ্ধতির এবং জাভাস্ক্রিপ্ট লাইব্রেরিগুলি তাদের বিকাশের স্টাইলে এটি অন্তর্ভুক্ত করা শুরু না করা পর্যন্ত এটি সত্যই জনপ্রিয় হয়ে উঠেনি। কয়েকটি উল্লেখযোগ্য উদাহরণ হ'ল Vue.js এবং React.js, যা আমি এখানে আরও লিখেছি।

পূর্ববর্তী ওয়েবসাইট, উদাহরণ.testsite.com এ ফিরে গিয়ে ধরে নিন যে আপনার এখন নিম্নলিখিত কোডের লাইন সহ একটি সূচক। Html ফাইল রয়েছে।



 -এর
  <মেটা চরসেট = "utf-8">
  <শিরোনাম> উদাহরণ ওয়েবসাইট 
 এর
 এর
  <ডিভিডি আইডি = "রুট">
    <অ্যাপ্লিকেশন> 
  
  <লিপি src = "https://vuejs.org" টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট"> 
  <স্ক্রিপ্ট src = "অবস্থান / of / app.js" টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট"> 
 এর

আপনি এখনই দেখতে পাচ্ছেন যে ক্লায়েন্টটি ব্যবহার করে রেন্ডার করার সময় সূচি কাজ করার পদ্ধতিতে কিছু বড় পরিবর্তন রয়েছে।

প্রারম্ভিকদের জন্য, এইচটিএমএল ফাইলের ভিতরে থাকা সামগ্রীটির পরিবর্তে, আপনার কাছে মূলের একটি আইডি সহ একটি ধারক ডিভ রয়েছে। ক্লোজিং বডি ট্যাগের ঠিক উপরে আপনার দুটি স্ক্রিপ্ট উপাদান রয়েছে। Vue.js জাভাস্ক্রিপ্ট লাইব্রেরি লোড করবে এমন একটি এবং অ্যাপ্লিকেশন নামে একটি ফাইল লোড করবে one

এটি সার্ভার-সাইড রেন্ডারিং ব্যবহারের চেয়ে একেবারে আলাদা কারণ সার্ভার এখন কেবল ওয়েবসাইটের খালি বিয়োগ লোড করার জন্য দায়বদ্ধ। প্রধান বয়লারপ্লেট। এই সমস্ত ক্ষেত্রে Vue.js এবং কাস্টম জাভাস্ক্রিপ্ট কোডটি ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট লাইব্রেরি দ্বারা সমস্ত কিছুই পরিচালিত হয়।

আপনি যদি কেবলমাত্র উপরের কোডটি দিয়ে ইউআরএলটিতে একটি অনুরোধ করতে চান, আপনি একটি ফাঁকা স্ক্রিন পাবেন। আসল সামগ্রীটি জাভাস্ক্রিপ্ট ব্যবহার করে রেন্ডার করা দরকার বলে লোড করার কিছুই নেই।

এটি ঠিক করার জন্য, আপনি নীচের কোডের লাইনগুলিকে app.js ফাইলে রাখবেন।

var তথ্য = {
        শিরোনাম: "আমার ওয়েবসাইট",
        বার্তা: "এটি আমার নতুন ওয়েবসাইটের উদাহরণ"
      }
  Vue.comp ভাগ ('অ্যাপ', {
    টেমপ্লেট:
    `
    

    

থেকে {{শিরোনাম}} থেকে     <পি আইডি = "আরও কনটেন্ট">। {বার্তা}}

     লিঙ্ক          `,     তথ্য: ফাংশন () {       তথ্য ফেরত;     },     পদ্ধতি: {       নতুন কনটেন্ট: ফাংশন () {         var নোড = ডকুমেন্ট.ক্রেটএলিমেন্ট ('পি');         var টেক্সট নোড = ডকুমেন্ট.ক্রেটটেক্সটনোড ('এটি অন্যচটিএমএল থেকে আরও কিছু সামগ্রী');         node.appendChild (textNode);         document.getElementById ( 'moreContent') appendChild (নোড)।       }     }   })   নতুন মান ({     এল: '# রুট',   });

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

এটি পুরোপুরি লোড না করে নতুন সামগ্রী আনার জন্য আপনি কেবলমাত্র পৃষ্ঠার খুব ছোট্ট অংশটি লোড করছেন বলে এটি আরও দ্রুত।

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

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

প্রতিটি পদ্ধতির উপকারিতা এবং বিপরীতে

তাই সেখানে যদি আপনি এটি আছে। সেগুলি হ'ল সার্ভার-সাইড এবং ক্লায়েন্ট-সাইড রেন্ডারিংয়ের মধ্যে প্রধান পার্থক্য। আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনটির জন্য কোন বিকল্পটি সেরা তা কেবল আপনি বিকাশকারীই সিদ্ধান্ত নিতে পারেন।

নীচে প্রতিটি পদ্ধতির জন্য অনুকূল এবং বিপরীতে একটি দ্রুত ব্রেকডাউন দেওয়া আছে:

সার্ভার পার্শ্ব পেশাদার:

  1. অনুসন্ধান ইঞ্জিনগুলি আরও ভাল এসইওর জন্য সাইটটি ক্রল করতে পারে।
  2. প্রাথমিক পৃষ্ঠা লোডটি দ্রুত।
  3. স্থির সাইটগুলির জন্য দুর্দান্ত।

সার্ভার-সাইড কনস:

  1. ঘন ঘন সার্ভারের অনুরোধ।
  2. সামগ্রিকভাবে ধীর পৃষ্ঠার রেন্ডারিং।
  3. পূর্ণ পৃষ্ঠা পুনরায় লোড।
  4. সমৃদ্ধ সাইট ইন্টারঅ্যাকশন।

ক্লায়েন্ট-পক্ষের পেশাদার:

  1. সমৃদ্ধ সাইট ইন্টারঅ্যাকশন
  2. প্রাথমিক লোডের পরে দ্রুত ওয়েবসাইট রেন্ডারিং।
  3. ওয়েব অ্যাপ্লিকেশন জন্য দুর্দান্ত।
  4. জাভাস্ক্রিপ্ট লাইব্রেরিগুলির শক্তিশালী নির্বাচন।

ক্লায়েন্ট-পক্ষের কনস:

  1. সঠিকভাবে প্রয়োগ না হলে কম এসইও।
  2. প্রাথমিক লোডে আরও সময় প্রয়োজন হতে পারে।
  3. বেশিরভাগ ক্ষেত্রে, একটি বাহ্যিক গ্রন্থাগার প্রয়োজন।

আপনি Vue.js সম্পর্কে আরও জানতে চাইলে VueReactor.com দেখুন। আমার সর্বশেষ গল্পের সাথে আপ টু ডেট থাকার জন্য আপনি juanmvega.com দেখতে পারেন।