পোস্ট হয়েছে ০৮-১১-২০১৯
ক্লায়েন্ট-সাইড রেন্ডারিং বনাম সার্ভার-সাইড রেন্ডারিং
প্রাথমিকভাবে, ওয়েব ফ্রেমওয়ার্কগুলির সার্ভারে রেন্ডার ভিউ ছিল। এখন এটি ক্লায়েন্টের উপর ঘটছে। আসুন প্রতিটি পদ্ধতির সুবিধা এবং অসুবিধাগুলি ঘুরে দেখি।
কর্মক্ষমতা
সার্ভার-সাইড রেন্ডারিং সহ, আপনি যখনই কোনও নতুন ওয়েব পৃষ্ঠা দেখতে চান, আপনাকে বাইরে বেরিয়ে আসতে হবে:
আপনি যখনই খেতে চান প্রতিবার সুপার মার্কেটে গাড়ি চালানো এটি আপনার কাছে অভিন্ন।
ক্লায়েন্ট-সাইড রেন্ডারিংয়ের সাথে আপনি একবার সুপার মার্কেটে যান এবং মাসের জন্য একগুচ্ছ খাবার কিনে 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">
এর
এর
<ডি ক্লাস = "ধারক">
এর
ভাল, অনুসরণ করার জন্য কোনও ট্যাগ নেই। এছাড়াও, এই ওয়েবপৃষ্ঠাটি বেশ জটলা দেখাচ্ছে, তাই আমরা যখন অনুসন্ধানের ফলাফল দেখাব তখন সম্ভবত আমরা এটিকে অগ্রাধিকার দিতে চাই না।
ক্রলারের খুব কমই জানা নেই, ক্লায়েন্ট সাইড ফ্রেমওয়ার্ক একগুচ্ছ অসাধারণ সামগ্রী দিয়ে <ডি ক্লাস = "ধারক">
যখন ক্রলারের www.example.com/page?query#!mystate জুড়ে আসে, তখন এটি এটিকে www.example.com/page?query&_escaped_fragment_=mystate এ রূপান্তরিত করে। এইভাবে, যখন আপনার সার্ভার _escaped_fraament_- এর সাথে একটি অনুরোধ পেয়েছে, তখন এটি জানে যে অনুরোধটি কোনও ক্রলার থেকে এসেছিল, কোনও মানবিক নয়।
মনে রাখবেন - সার্ভারটি ক্রোলারকে <ডি ক্লাস = "ধারক"> ... (ভিতরে থাকা সামগ্রী সহ) দেখতে চায়, <ডি ক্লাস = "ধারক">
