রিঅ্যাক্ট-স্ন্যাপ সহ প্রি-রেন্ডার রুট

সার্ভার-সাইড রেন্ডারিং নয় তবে এখনও আপনার প্রতিক্রিয়া সাইটের কর্মক্ষমতা বাড়াতে চান? প্রি-রেন্ডারিং চেষ্টা করুন!

হোসাইন জিরদেহ

react-snap হল একটি তৃতীয় পক্ষের লাইব্রেরি যা আপনার সাইটের পৃষ্ঠাগুলিকে স্ট্যাটিক HTML ফাইলে প্রি-রেন্ডার করে। এটি আপনার অ্যাপ্লিকেশনে প্রথম পেইন্ট সময় উন্নত করতে পারে।

এখানে একটি সিমুলেটেড 3G সংযোগ এবং মোবাইল ডিভাইসে লোড করা প্রি-রেন্ডারিং সহ এবং ছাড়া একই অ্যাপ্লিকেশনটির তুলনা করা হয়েছে:

পাশাপাশি লোডিং তুলনা। প্রি-রেন্ডারিং ব্যবহার করা সংস্করণটি 4.2 সেকেন্ড দ্রুত লোড হয়।

কেন এই দরকারী?

বৃহৎ একক-পৃষ্ঠার অ্যাপ্লিকেশনগুলির প্রধান কর্মক্ষমতা সমস্যা হল যে ব্যবহারকারীকে জাভাস্ক্রিপ্ট বান্ডিল(গুলি) এর জন্য অপেক্ষা করতে হবে যা সাইটটি ডাউনলোড শেষ করার জন্য তৈরি করে তারা কোনো বাস্তব বিষয়বস্তু দেখার আগে। বান্ডেল যত বড় হবে, ব্যবহারকারীকে তত বেশি অপেক্ষা করতে হবে।

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

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

প্রতিক্রিয়া

react-snap আপনার অ্যাপ্লিকেশনে বিভিন্ন রুটের পূর্ব-রেন্ডার করা HTML ফাইল তৈরি করতে Puppeteer ব্যবহার করে। শুরু করতে, এটি একটি বিকাশ নির্ভরতা হিসাবে ইনস্টল করুন:

npm install --save-dev react-snap

তারপর আপনার package.json এ একটি postbuild স্ক্রিপ্ট যোগ করুন:

"scripts": {
  //...
  "postbuild": "react-snap"
}

প্রতিবার তৈরি করা অ্যাপ্লিকেশনগুলির একটি নতুন বিল্ড ( npm build ) হলে এটি স্বয়ংক্রিয়ভাবে react-snap কমান্ডটি চালাবে।

আপনাকে যা করতে হবে তা হল অ্যাপ্লিকেশনটি বুট করার পদ্ধতিটি পরিবর্তন করা। নিম্নলিখিত src/index.js ফাইলটি পরিবর্তন করুন:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) {
  ReactDOM.hydrate(<App />, rootElement);
} else {
  ReactDOM.render(<App />, rootElement);
}

সরাসরি DOM-এ রুট রিঅ্যাক্ট এলিমেন্ট রেন্ডার করার জন্য শুধুমাত্র ReactDOM.render ব্যবহার করার পরিবর্তে, এইচটিএমএল বিষয়বস্তু প্রি-রেন্ডার করা হয়েছে (বা সার্ভারে রেন্ডার করা হয়েছে) কিনা তা নির্ধারণ করতে কোনো চাইল্ড নোড ইতিমধ্যেই উপস্থিত আছে কিনা তা পরীক্ষা করে। যদি তাই হয়, ReactDOM.hydrate ইভেন্ট শ্রোতাদের ইভেন্ট শ্রোতাদেরকে নতুন করে তৈরি করার পরিবর্তে ইতিমধ্যে তৈরি করা HTML এর সাথে সংযুক্ত করতে ব্যবহার করা হয়।

অ্যাপ্লিকেশনটি তৈরি করা এখন ক্রল করা প্রতিটি রুটের জন্য পেলোড হিসাবে স্ট্যাটিক HTML ফাইল তৈরি করবে। আপনি HTML অনুরোধের URL-এ ক্লিক করে এবং তারপর Chrome DevTools-এর মধ্যে প্রিভিউ ট্যাবে ক্লিক করে HTML পেলোড কেমন দেখাচ্ছে তা দেখতে পারেন৷

একটি আগে এবং পরে তুলনা. আফটার শট দেখায় বিষয়বস্তু রেন্ডার হয়েছে।

স্টাইল না করা বিষয়বস্তুর ফ্ল্যাশ

যদিও স্ট্যাটিক এইচটিএমএল এখন প্রায় সঙ্গে সঙ্গে রেন্ডার করা হয়, তবুও এটি ডিফল্টরূপে আনস্টাইল করা থাকে যা "আনস্টাইল না করা সামগ্রীর ফ্ল্যাশ" (এফওইসি) দেখানোর সমস্যা সৃষ্টি করতে পারে। এটি বিশেষভাবে লক্ষণীয় হতে পারে যদি আপনি একটি CSS-in-JS লাইব্রেরি ব্যবহার করে নির্বাচকদের তৈরি করেন কারণ জাভাস্ক্রিপ্ট বান্ডেলকে যেকোনো স্টাইল প্রয়োগ করার আগে কার্যকর করা শেষ করতে হবে।

এটি প্রতিরোধে সাহায্য করার জন্য, সমালোচনামূলক CSS বা ন্যূনতম পরিমাণ CSS যা প্রারম্ভিক পৃষ্ঠাটি রেন্ডার করার জন্য প্রয়োজন, সরাসরি HTML নথির <head> এ ইনলাইন করা যেতে পারে। react-snap বিভিন্ন রুটের জন্য যেকোনো গুরুত্বপূর্ণ CSS বের করতে হুড, minimalcss এর অধীনে আরেকটি তৃতীয়-পক্ষের লাইব্রেরি ব্যবহার করে। আপনি আপনার package.json ফাইলে নিম্নলিখিত উল্লেখ করে এটি সক্ষম করতে পারেন:

"reactSnap": {
  "inlineCss": true
}

Chrome DevTools-এ প্রতিক্রিয়া পূর্বরূপ দেখে নেওয়া এখন সমালোচনামূলক CSS ইনলাইন সহ স্টাইল করা পৃষ্ঠা দেখাবে।

একটি আগে এবং পরে তুলনা. আফটার শট দেখায় কন্টেন্ট রেন্ডার হয়েছে এবং স্টাইল করা হয়েছে কারণ ইনলাইন করা সমালোচনামূলক CSS।

উপসংহার

আপনি যদি আপনার অ্যাপ্লিকেশনে সার্ভার-সাইড রেন্ডারিং রুট না হন, তাহলে আপনার ব্যবহারকারীদের কাছে স্ট্যাটিক HTML প্রি-রেন্ডার করতে react-snap ব্যবহার করুন।

  1. এটি একটি বিকাশ নির্ভরতা হিসাবে ইনস্টল করুন এবং শুধুমাত্র ডিফল্ট সেটিংস দিয়ে শুরু করুন।
  2. পরীক্ষামূলক inlineCss বিকল্পটি ব্যবহার করুন যদি এটি আপনার সাইটের জন্য কাজ করে তাহলে সমালোচনামূলক CSS ইনলাইন করুন।
  3. আপনি যদি কোনো রুটের মধ্যে কম্পোনেন্ট লেভেলে কোড স্প্লিটিং ব্যবহার করেন, তাহলে আপনার ব্যবহারকারীদের কাছে লোডিং স্টেট প্রি-রেন্ডার না করার বিষয়ে সতর্ক থাকুন। react-snap README এটিকে আরও বিস্তারিতভাবে কভার করে।