সার্ভার-সাইড রেন্ডারিং নয় তবে এখনও আপনার প্রতিক্রিয়া সাইটের কর্মক্ষমতা বাড়াতে চান? প্রি-রেন্ডারিং চেষ্টা করুন!
react-snap হল একটি তৃতীয় পক্ষের লাইব্রেরি যা আপনার সাইটের পৃষ্ঠাগুলিকে স্ট্যাটিক HTML ফাইলে প্রি-রেন্ডার করে। এটি আপনার অ্যাপ্লিকেশনে প্রথম পেইন্ট সময় উন্নত করতে পারে।
এখানে একটি সিমুলেটেড 3G সংযোগ এবং মোবাইল ডিভাইসে লোড করা প্রি-রেন্ডারিং সহ এবং ছাড়া একই অ্যাপ্লিকেশনটির তুলনা করা হয়েছে:
কেন এই দরকারী?
বৃহৎ একক-পৃষ্ঠার অ্যাপ্লিকেশনগুলির প্রধান কর্মক্ষমতা সমস্যা হল যে ব্যবহারকারীকে জাভাস্ক্রিপ্ট বান্ডিল(গুলি) এর জন্য অপেক্ষা করতে হবে যা সাইটটি ডাউনলোড শেষ করার জন্য তৈরি করে তারা কোনো বাস্তব বিষয়বস্তু দেখার আগে। বান্ডেল যত বড় হবে, ব্যবহারকারীকে তত বেশি অপেক্ষা করতে হবে।
এটি সমাধান করার জন্য, অনেক বিকাশকারী শুধুমাত্র ব্রাউজারে এটি বুট করার পরিবর্তে সার্ভারে অ্যাপ্লিকেশন রেন্ডার করার পদ্ধতি গ্রহণ করে। প্রতিটি পৃষ্ঠা/রুট ট্রানজিশনের সাথে, সার্ভারে সম্পূর্ণ এইচটিএমএল তৈরি হয় এবং ব্রাউজারে পাঠানো হয়, যা ফার্স্ট পেইন্টের সময় কমিয়ে দেয় কিন্তু ফার্স্ট বাইট থেকে ধীর সময়ের খরচে আসে।
প্রি-রেন্ডারিং হল একটি পৃথক কৌশল যা সার্ভার রেন্ডারিংয়ের চেয়ে কম জটিল, তবে আপনার অ্যাপ্লিকেশনে ফার্স্ট পেইন্ট সময় উন্নত করার একটি উপায়ও প্রদান করে। একটি হেডলেস ব্রাউজার, বা ইউজার ইন্টারফেস ছাড়া একটি ব্রাউজার, বিল্ড টাইমে প্রতিটি রুটের স্ট্যাটিক HTML ফাইল তৈরি করতে ব্যবহৃত হয়। এই ফাইলগুলিকে জাভাস্ক্রিপ্ট বান্ডিলগুলির সাথে পাঠানো যেতে পারে যা অ্যাপ্লিকেশনটির জন্য প্রয়োজনীয়৷
প্রতিক্রিয়া
react-snap আপনার অ্যাপ্লিকেশনে বিভিন্ন রুটের পূর্ব-রেন্ডার করা HTML ফাইল তৈরি করতে Puppeteer ব্যবহার করে। শুরু করতে, এটি একটি বিকাশ নির্ভরতা হিসাবে ইনস্টল করুন: