রিঅ্যাক্ট সিলেক্টিভ হাইড্রেশন: প্রায়োরিটি-ভিত্তিক কম্পোনেন্ট লোডিং-এর একটি গভীর বিশ্লেষণ

উন্নত ওয়েব পারফরম্যান্সের নিরলস প্রচেষ্টায়, ফ্রন্টএন্ড ডেভেলপাররা প্রতিনিয়ত একটি জটিল সমঝোতার মধ্য দিয়ে যান। আমরা সমৃদ্ধ এবং ইন্টারেক্টিভ অ্যাপ্লিকেশন চাই, কিন্তু ব্যবহারকারীর ডিভাইস বা নেটওয়ার্ক স্পীড নির্বিশেষে সেগুলোকে দ্রুত লোড হওয়া এবং বিলম্ব ছাড়াই প্রতিক্রিয়া জানানোও প্রয়োজন। বছরের পর বছর ধরে, সার্ভার-সাইড রেন্ডারিং (SSR) এই প্রচেষ্টার একটি ভিত্তি ছিল, যা দ্রুত প্রাথমিক পেজ লোড এবং শক্তিশালী SEO সুবিধা প্রদান করত। যাইহোক, প্রথাগত SSR-এর একটি বড় প্রতিবন্ধকতা ছিল: কুখ্যাত "সব-অথবা-কিছুই-না" (all-or-nothing) হাইড্রেশন সমস্যা।

একটি SSR-জেনারেটেড পেজ সম্পূর্ণরূপে ইন্টারেক্টিভ হওয়ার আগে, পুরো অ্যাপ্লিকেশনের জাভাস্ক্রিপ্ট বান্ডেলটি ডাউনলোড, পার্স এবং এক্সিকিউট করতে হতো। এর ফলে প্রায়শই ব্যবহারকারীদের জন্য এক হতাশাজনক অভিজ্ঞতা তৈরি হতো, যেখানে একটি পেজ সম্পূর্ণ এবং প্রস্তুত মনে হলেও ক্লিক বা ইনপুটের প্রতি কোনো সাড়া দিত না। এই ঘটনাটি টাইম টু ইন্টারেক্টিভ (TTI) এবং নতুন ইন্টারেকশন টু নেক্সট পেইন্ট (INP) এর মতো গুরুত্বপূর্ণ মেট্রিক্সে নেতিবাচক প্রভাব ফেলে।

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

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

অতীতকে বোঝা: প্রথাগত SSR হাইড্রেশনের চ্যালেঞ্জ

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

সার্ভার-সাইড রেন্ডারিং (SSR) কী?

একটি সাধারণ ক্লায়েন্ট-সাইড রেন্ডারড (CSR) রিঅ্যাক্ট অ্যাপ্লিকেশনে, ব্রাউজার একটি ন্যূনতম HTML ফাইল এবং একটি বড় জাভাস্ক্রিপ্ট বান্ডেল গ্রহণ করে। এরপর ব্রাউজার পেজের কন্টেন্ট রেন্ডার করার জন্য জাভাস্ক্রিপ্টটি এক্সিকিউট করে। এই প্রক্রিয়াটি ধীর হতে পারে, যা ব্যবহারকারীদের একটি ফাঁকা স্ক্রিনের দিকে তাকিয়ে থাকতে বাধ্য করে এবং সার্চ ইঞ্জিন ক্রলারদের জন্য কন্টেন্ট ইনডেক্স করা কঠিন করে তোলে।

SSR এই মডেলটিকে উল্টে দেয়। সার্ভার রিঅ্যাক্ট অ্যাপ্লিকেশনটি চালায়, অনুরোধ করা পেজের জন্য সম্পূর্ণ HTML তৈরি করে এবং এটি ব্রাউজারে পাঠায়। এর সুবিধাগুলো তাৎক্ষণিক:

• দ্রুত ফার্স্ট কনটেন্টফুল পেইন্ট (FCP): ব্রাউজার HTML আসার সাথে সাথেই রেন্ডার করতে পারে, তাই ব্যবহারকারী প্রায় সঙ্গে সঙ্গে অর্থপূর্ণ কন্টেন্ট দেখতে পায়।
• উন্নত SEO: সার্চ ইঞ্জিন ক্রলাররা সহজেই সার্ভার-রেন্ডার করা HTML পার্স করতে পারে, যা আরও ভালো ইনডেক্সিং এবং র‍্যাঙ্কিং-এর দিকে পরিচালিত করে।

"সব-অথবা-কিছুই-না" হাইড্রেশন প্রতিবন্ধকতা

যদিও SSR থেকে প্রাথমিক HTML একটি দ্রুত নন-ইন্টারেক্টিভ প্রিভিউ প্রদান করে, পেজটি তখনও সম্পূর্ণরূপে ব্যবহারযোগ্য হয় না। আপনার রিঅ্যাক্ট কম্পোনেন্টে সংজ্ঞায়িত ইভেন্ট হ্যান্ডলার (যেমন `onClick`) এবং স্টেট ম্যানেজমেন্ট অনুপস্থিত থাকে। সার্ভার-জেনারেটেড HTML-এ এই জাভাস্ক্রিপ্ট লজিক সংযুক্ত করার প্রক্রিয়াটিকে হাইড্রেশন বলা হয়।

এখানেই ক্লাসিক সমস্যাটি নিহিত: প্রথাগত হাইড্রেশন ছিল একটি মনোলিথিক, সিনক্রোনাস এবং ব্লকিং অপারেশন। এটি একটি কঠোর, ক্ষমাহীন ক্রম অনুসরণ করত:

1. পুরো পেজের জন্য সম্পূর্ণ জাভাস্ক্রিপ্ট বান্ডেলটি ডাউনলোড করতে হবে।
2. রিঅ্যাক্টকে অবশ্যই সম্পূর্ণ বান্ডেলটি পার্স এবং এক্সিকিউট করতে হবে।
3. এরপর রিঅ্যাক্ট রুট থেকে শুরু করে সম্পূর্ণ কম্পোনেন্ট ট্রি বরাবর চলে, প্রতিটি কম্পোনেন্টের জন্য ইভেন্ট লিসেনার সংযুক্ত করে এবং স্টেট সেট আপ করে।
4. এই সম্পূর্ণ প্রক্রিয়াটি শেষ হওয়ার পরেই পেজটি ইন্টারেক্টিভ হয়।

ভাবুন, আপনি একটি সম্পূর্ণ অ্যাসেম্বল করা, সুন্দর নতুন গাড়ি পেয়েছেন, কিন্তু আপনাকে বলা হয়েছে যে আপনি গাড়ির সমস্ত ইলেক্ট্রনিক্সের জন্য একটি মাস্টার সুইচ অন না করা পর্যন্ত একটি দরজাও খুলতে, ইঞ্জিন চালু করতে বা এমনকি হর্নও বাজাতে পারবেন না। আপনি যদি শুধু যাত্রীর আসন থেকে আপনার ব্যাগটি নিতে চান, তাহলেও আপনাকে সবকিছুর জন্য অপেক্ষা করতে হবে। এটাই ছিল প্রথাগত হাইড্রেশনের ব্যবহারকারীর অভিজ্ঞতা। একটি পেজ প্রস্তুত মনে হতে পারে, কিন্তু এটির সাথে ইন্টারঅ্যাক্ট করার যেকোনো প্রচেষ্টা নিষ্ফল হতো, যা ব্যবহারকারীর মধ্যে বিভ্রান্তি এবং "রেজ ক্লিক" (rage clicks) তৈরি করত।

রিঅ্যাক্ট ১৮-এর আগমন: কনকারেন্ট রেন্ডারিং-এর সাথে একটি দৃষ্টান্তের পরিবর্তন

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

কনকারেন্সি দুটি গুরুত্বপূর্ণ বৈশিষ্ট্যকে সক্ষম করে যা সিলেক্টিভ হাইড্রেশনকে সম্ভব করার জন্য একসাথে কাজ করে:

1. স্ট্রিমিং SSR: সার্ভার পুরো পেজ প্রস্তুত হওয়ার জন্য অপেক্ষা না করে, রেন্ডার হওয়ার সাথে সাথে খণ্ডে খণ্ডে HTML পাঠাতে পারে।
2. সিলেক্টিভ হাইড্রেশন: রিঅ্যাক্ট সম্পূর্ণ HTML স্ট্রিম এবং সমস্ত জাভাস্ক্রিপ্ট আসার আগেই পেজটি হাইড্রেট করা শুরু করতে পারে, এবং এটি একটি নন-ব্লকিং, প্রায়োরিটাইজড পদ্ধতিতে তা করতে পারে।

মূল ধারণা: সিলেক্টিভ হাইড্রেশন কী?

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

মূল উপাদান: স্ট্রিমিং SSR এবং ``

সিলেক্টিভ হাইড্রেশন বোঝার জন্য, আপনাকে প্রথমে এর দুটি ভিত্তি স্তম্ভ বুঝতে হবে: স্ট্রিমিং SSR এবং `` কম্পোনেন্ট।

স্ট্রিমিং SSR

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

`` বাউন্ডারি

`` কম্পোনেন্ট হলো সেই মেকানিজম যা আপনি রিঅ্যাক্টকে বলতে ব্যবহার করেন যে আপনার অ্যাপ্লিকেশনের কোন অংশগুলো পেজের বাকি অংশকে ব্লক না করে অ্যাসিঙ্ক্রোনাসভাবে লোড করা যেতে পারে। আপনি একটি ধীরগতির কম্পোনেন্টকে `` দিয়ে মুড়ে দেন এবং একটি `fallback` প্রপ প্রদান করেন, যা কম্পোনেন্টটি লোড হওয়ার সময় রিঅ্যাক্ট রেন্ডার করবে।

সার্ভারে, `` স্ট্রিমিংয়ের জন্য একটি সংকেত। যখন সার্ভার একটি `` বাউন্ডারির সম্মুখীন হয়, তখন সে জানে যে সে প্রথমে ফলব্যাক HTML পাঠাতে পারে এবং পরে আসল কম্পোনেন্টের HTML প্রস্তুত হলে স্ট্রিম করতে পারে। ব্রাউজারে, `` বাউন্ডারিগুলো সেই "দ্বীপ" (islands) সংজ্ঞায়িত করে যা স্বাধীনভাবে হাইড্রেট করা যায়।

এখানে একটি ধারণাগত উদাহরণ দেওয়া হলো:

function App() {
  return (
    <div>
      <Header />
      <main>
        <ArticleContent />
        <Suspense fallback={<CommentsSkeleton />}>
          <CommentsSection />  <!-- এই কম্পোনেন্টটি ডেটা ফেচ করতে পারে -->
        </Suspense>
      </main>
      <Suspense fallback={<ChatWidgetLoader />}>
        <ChatWidget /> <!-- এটি একটি ভারী থার্ড-পার্টি স্ক্রিপ্ট -->
      </Suspense>
      <Footer />
    </div>
  );
}

এই উদাহরণে, `Header`, `ArticleContent`, এবং `Footer` অবিলম্বে রেন্ডার এবং স্ট্রিম করা হবে। ব্রাউজার `CommentsSkeleton` এবং `ChatWidgetLoader`-এর জন্য HTML পাবে। পরে, যখন `CommentsSection` এবং `ChatWidget` সার্ভারে প্রস্তুত হবে, তখন তাদের HTML ক্লায়েন্টের কাছে স্ট্রিম করা হবে। এই `` বাউন্ডারিগুলো সেই সীম (seams) তৈরি করে যা সিলেক্টিভ হাইড্রেশনকে তার জাদু দেখাতে সাহায্য করে।

এটি কীভাবে কাজ করে: প্রায়োরিটি-ভিত্তিক লোডিং বাস্তবে

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

ব্যবহারকারীই অগ্রাধিকার

এখানে মূল নীতিটি হলো: রিঅ্যাক্ট সেই কম্পোনেন্টগুলোকে হাইড্রেট করার জন্য অগ্রাধিকার দেয় যেগুলোর সাথে ব্যবহারকারী ইন্টারঅ্যাক্ট করে।

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

1. ইভেন্ট ক্যাপচার: রিঅ্যাক্ট রুটে ক্লিক ইভেন্টটি ক্যাপচার করে।
2. প্রায়োরিটাইজেশন: এটি শনাক্ত করে যে ব্যবহারকারী কোন কম্পোনেন্টে ক্লিক করেছে। তারপর এটি সেই নির্দিষ্ট কম্পোনেন্ট এবং তার প্যারেন্ট কম্পোনেন্টগুলোকে হাইড্রেট করার অগ্রাধিকার বাড়িয়ে দেয়। চলমান যেকোনো কম-অগ্রাধিকারের হাইড্রেশন কাজ পজ করা হয়।
3. হাইড্রেট এবং রিপ্লে: রিঅ্যাক্ট জরুরিভাবে টার্গেট কম্পোনেন্টটি হাইড্রেট করে। একবার হাইড্রেশন সম্পূর্ণ হলে এবং `onClick` হ্যান্ডলার সংযুক্ত হলে, রিঅ্যাক্ট ক্যাপচার করা ক্লিক ইভেন্টটি রিপ্লে করে।

ব্যবহারকারীর দৃষ্টিকোণ থেকে, ইন্টারঅ্যাকশনটি স্বাভাবিকভাবেই কাজ করে, যেন কম্পোনেন্টটি শুরু থেকেই ইন্টারেক্টিভ ছিল। তারা সম্পূর্ণ অজ্ঞাত থাকে যে এটিকে তাৎক্ষণিকভাবে ঘটানোর জন্য পর্দার আড়ালে একটি অত্যাধুনিক প্রায়োরিটাইজেশন নৃত্য ঘটেছে।

একটি ধাপে ধাপে দৃশ্যকল্প

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

1. সার্ভার স্ট্রিমিং: সার্ভার প্রোডাক্ট গ্রিড সহ প্রাথমিক HTML শেল পাঠায়। সাইডবার এবং চ্যাট উইজেট ``-এ মোড়ানো থাকে এবং তাদের ফলব্যাক UI (স্কেলিটন/লোডার) পাঠানো হয়।
2. প্রাথমিক রেন্ডার: ব্রাউজার প্রোডাক্ট গ্রিড রেন্ডার করে। ব্যবহারকারী প্রায় সঙ্গে সঙ্গে প্রোডাক্টগুলো দেখতে পায়। TTI এখনও বেশি কারণ কোনো জাভাস্ক্রিপ্ট এখনো সংযুক্ত হয়নি।
3. কোড লোডিং: জাভাস্ক্রিপ্ট বান্ডেলগুলো ডাউনলোড হতে শুরু করে। ধরা যাক সাইডবার এবং চ্যাট উইজেটের কোড আলাদা, কোড-স্প্লিট চাঙ্কে রয়েছে।
4. ব্যবহারকারীর ইন্টারঅ্যাকশন: কোনো কিছু হাইড্রেট হওয়া শেষ হওয়ার আগেই, ব্যবহারকারী তার পছন্দের একটি প্রোডাক্ট দেখে এবং প্রোডাক্ট গ্রিডের মধ্যে "Add to Cart" বোতামে ক্লিক করে।
5. প্রায়োরিটাইজেশনের জাদু: রিঅ্যাক্ট ক্লিকটি ক্যাপচার করে। এটি দেখে যে ক্লিকটি `ProductGrid` কম্পোনেন্টের ভিতরে ঘটেছে। এটি অবিলম্বে পেজের অন্যান্য অংশের হাইড্রেশন (যা হয়তো সবে শুরু হয়েছিল) বাতিল বা পজ করে এবং একচেটিয়াভাবে `ProductGrid` হাইড্রেট করার উপর মনোযোগ দেয়।
6. দ্রুত ইন্টারঅ্যাক্টিভিটি: `ProductGrid` কম্পোনেন্টটি খুব দ্রুত হাইড্রেট হয় কারণ এর কোড সম্ভবত প্রধান বান্ডেলে থাকে। `onClick` হ্যান্ডলারটি সংযুক্ত হয়, এবং ক্যাপচার করা ক্লিক ইভেন্টটি রিপ্লে করা হয়। আইটেমটি কার্টে যোগ করা হয়। ব্যবহারকারী তাৎক্ষণিক প্রতিক্রিয়া পায়।
7. হাইড্রেশন পুনরায় শুরু: এখন যেহেতু উচ্চ-অগ্রাধিকারের ইন্টারঅ্যাকশনটি হ্যান্ডেল করা হয়েছে, রিঅ্যাক্ট তার কাজ পুনরায় শুরু করে। এটি সাইডবার হাইড্রেট করতে এগিয়ে যায়। অবশেষে, যখন চ্যাট উইজেটের কোড আসে, তখন এটি সেই কম্পোনেন্টটি শেষে হাইড্রেট করে।

ফলাফল? পেজের সবচেয়ে গুরুত্বপূর্ণ অংশের জন্য TTI ছিল প্রায়-তাৎক্ষণিক, যা ব্যবহারকারীর নিজস্ব অভিপ্রায় দ্বারা চালিত। সামগ্রিক পেজের TTI আর একটি একক, ভীতিকর সংখ্যা নয় বরং একটি প্রগতিশীল এবং ব্যবহারকারী-কেন্দ্রিক প্রক্রিয়া।

বিশ্বব্যাপী দর্শকদের জন্য বাস্তব সুবিধা

সিলেক্টিভ হাইড্রেশনের প্রভাব গভীর, বিশেষ করে সেইসব অ্যাপ্লিকেশনের জন্য যা বিভিন্ন নেটওয়ার্ক কন্ডিশন এবং ডিভাইস ক্ষমতা সম্পন্ন একটি বৈচিত্র্যময়, বিশ্বব্যাপী দর্শকদের পরিষেবা দেয়।

উপলব্ধ পারফরম্যান্সের নাটকীয় উন্নতি

সবচেয়ে উল্লেখযোগ্য সুবিধা হলো ব্যবহারকারীর দ্বারা অনুভূত পারফরম্যান্সের ব্যাপক উন্নতি। পেজের যে অংশগুলোর সাথে ব্যবহারকারী ইন্টারঅ্যাক্ট করে সেগুলোকে প্রথমে উপলব্ধ করার মাধ্যমে, অ্যাপ্লিকেশনটি *feels* দ্রুত। এটি ব্যবহারকারী ধরে রাখার জন্য অত্যন্ত গুরুত্বপূর্ণ। একটি উন্নয়নশীল দেশে ধীর 3G নেটওয়ার্কে থাকা একজন ব্যবহারকারীর জন্য, পুরো পেজটি ইন্টারেক্টিভ হওয়ার জন্য ১৫ সেকেন্ড অপেক্ষা করা এবং ৩ সেকেন্ডের মধ্যে মূল কন্টেন্টের সাথে ইন্টারঅ্যাক্ট করতে পারার মধ্যে পার্থক্য বিশাল।

উন্নত কোর ওয়েব ভাইটালস

সিলেক্টিভ হাইড্রেশন সরাসরি গুগলের কোর ওয়েব ভাইটালসকে প্রভাবিত করে:

• ইন্টারেকশন টু নেক্সট পেইন্ট (INP): এই নতুন মেট্রিকটি রেসপন্সিভনেস পরিমাপ করে। ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে হাইড্রেশনকে অগ্রাধিকার দেওয়ার মাধ্যমে, সিলেক্টিভ হাইড্রেশন নিশ্চিত করে যে ইন্টারঅ্যাকশনগুলো দ্রুত হ্যান্ডেল করা হয়, যা অনেক কম INP-এর দিকে পরিচালিত করে।
• টাইম টু ইন্টারেক্টিভ (TTI): যদিও *entire* পেজের TTI-তে এখনও সময় লাগতে পারে, গুরুত্বপূর্ণ ব্যবহারকারী পথের জন্য TTI নাটকীয়ভাবে হ্রাস পায়।
• ফার্স্ট ইনপুট ডিলে (FID): INP-এর মতোই, FID প্রথম ইন্টারঅ্যাকশন প্রসেস হওয়ার আগের বিলম্ব পরিমাপ করে। সিলেক্টিভ হাইড্রেশন এই বিলম্বকে সর্বনিম্ন করে।

ভারী কম্পোনেন্ট থেকে কন্টেন্টকে আলাদা করা

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

আরও স্থিতিস্থাপক অ্যাপ্লিকেশন

যেহেতু হাইড্রেশন খণ্ডে খণ্ডে হতে পারে, তাই একটি অ-প্রয়োজনীয় কম্পোনেন্টে (যেমন একটি সোশ্যাল মিডিয়া উইজেট) একটি ত্রুটি পুরো পেজটিকে ভেঙে দেবে এমন কোনো নিশ্চয়তা নেই। রিঅ্যাক্ট সম্ভাব্যভাবে সেই `` বাউন্ডারির মধ্যে ত্রুটিটিকে বিচ্ছিন্ন করতে পারে যখন বাকি অ্যাপ্লিকেশনটি ইন্টারেক্টিভ থাকে।

বাস্তব প্রয়োগ এবং সেরা অনুশীলন

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

`hydrateRoot` API গ্রহণ করা

ক্লায়েন্টে, এই নতুন আচরণের জন্য এন্ট্রি পয়েন্ট হলো `hydrateRoot` API। আপনাকে পুরানো `ReactDOM.hydrate` থেকে `ReactDOM.hydrateRoot`-এ স্যুইচ করতে হবে।

// Before (Legacy)
import { hydrate } from 'react-dom';
const container = document.getElementById('root');
hydrate(<App />, container);

// After (React 18+)
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = hydrateRoot(container, <App />);

এই সাধারণ পরিবর্তনটি আপনার অ্যাপ্লিকেশনকে সিলেক্টিভ হাইড্রেশন সহ নতুন কনকারেন্ট রেন্ডারিং বৈশিষ্ট্যগুলোর জন্য অপ্ট-ইন করে।

``-এর কৌশলগত ব্যবহার

সিলেক্টিভ হাইড্রেশনের শক্তি আনলক হয় আপনি কীভাবে আপনার `` বাউন্ডারিগুলো স্থাপন করেন তার উপর। প্রতিটি ছোট কম্পোনেন্টকে র‍্যাপ করবেন না; লজিক্যাল UI ইউনিট বা "দ্বীপ" (islands) হিসেবে চিন্তা করুন যা ব্যবহারকারীর ফ্লোকে ব্যাহত না করে স্বাধীনভাবে লোড হতে পারে।

`` বাউন্ডারির জন্য ভালো প্রার্থী হলো:

• সাইডবার এবং অ্যাসাইড: প্রায়শই গৌণ তথ্য বা নেভিগেশন থাকে যা প্রাথমিক ইন্টারঅ্যাকশনের জন্য গুরুত্বপূর্ণ নয়।
• মন্তব্য বিভাগ: সাধারণত লোড হতে ধীর এবং পেজের নীচে অবস্থিত।
• ইন্টারেক্টিভ উইজেট: ফটো গ্যালারি, জটিল ডেটা ভিজ্যুয়ালাইজেশন, বা এমবেডেড ম্যাপ।
• থার্ড-পার্টি স্ক্রিপ্ট: চ্যাটবট, অ্যানালিটিক্স, এবং বিজ্ঞাপন কম্পোনেন্টগুলো নিখুঁত প্রার্থী।
• ফোল্ডের নীচের কন্টেন্ট: পেজ লোড হওয়ার সাথে সাথে ব্যবহারকারী যা দেখতে পাবে না।

কোড স্প্লিটিং-এর জন্য `React.lazy`-এর সাথে একত্রিত করা

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

import React, { Suspense, lazy } from 'react';

const CommentsSection = lazy(() => import('./CommentsSection'));
const ChatWidget = lazy(() => import('./ChatWidget'));

function App() {
  return (
    <div>
      <ArticleContent />
      <Suspense fallback={<CommentsSkeleton />}>
        <CommentsSection />
      </Suspense>
      <Suspense fallback={null}> <!-- একটি লুকানো উইজেটের জন্য কোনো ভিজ্যুয়াল লোডার প্রয়োজন নেই -->
        <ChatWidget />
      </Suspense>
    </div>
  );
}

এই সেটআপে, `CommentsSection` এবং `ChatWidget`-এর জন্য জাভাস্ক্রিপ্ট কোড আলাদা ফাইলে থাকবে। ব্রাউজার কেবল তখনই সেগুলো ফেচ করবে যখন রিঅ্যাক্ট সেগুলোকে রেন্ডার করার সিদ্ধান্ত নেবে, এবং তারা মূল `ArticleContent`-কে ব্লক না করে স্বাধীনভাবে হাইড্রেট হবে।

`renderToPipeableStream` দিয়ে সার্ভার-সাইড সেটআপ

যারা কাস্টম SSR সমাধান তৈরি করছেন, তাদের জন্য ব্যবহার করার সার্ভার-সাইড API হলো `renderToPipeableStream`। এই APIটি বিশেষভাবে স্ট্রিমিংয়ের জন্য ডিজাইন করা হয়েছে এবং ``-এর সাথে নির্বিঘ্নে একত্রিত হয়। এটি আপনাকে কখন HTML পাঠাতে হবে এবং কীভাবে ত্রুটি হ্যান্ডেল করতে হবে তার উপর সূক্ষ্ম-নিয়ন্ত্রণ দেয়। যাইহোক, বেশিরভাগ ডেভেলপারের জন্য, Next.js-এর মতো একটি মেটা-ফ্রেমওয়ার্ক হলো প্রস্তাবিত পথ কারণ এটি এই জটিলতা থেকে দূরে রাখে।

ভবিষ্যৎ: রিঅ্যাক্ট সার্ভার কম্পোনেন্টস

সিলেক্টিভ হাইড্রেশন একটি বিশাল পদক্ষেপ, তবে এটি আরও বড় একটি গল্পের অংশ। পরবর্তী বিবর্তন হলো রিঅ্যাক্ট সার্ভার কম্পোনেন্টস (RSCs)। RSCs হলো এমন কম্পোনেন্ট যা একচেটিয়াভাবে সার্ভারে চলে এবং তাদের জাভাস্ক্রিপ্ট ক্লায়েন্টের কাছে পাঠায় না। এর মানে হলো তাদের হাইড্রেট করার কোনো প্রয়োজনই নেই, যা ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট বান্ডেলকে আরও কমিয়ে দেয়।

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

উপসংহার: কঠিনভাবে নয়, স্মার্টভাবে হাইড্রেট করা

রিঅ্যাক্টের সিলেক্টিভ হাইড্রেশন কেবল একটি পারফরম্যান্স অপটিমাইজেশন নয়; এটি একটি আরও ব্যবহারকারী-কেন্দ্রিক আর্কিটেকচারের দিকে একটি মৌলিক পরিবর্তন। অতীতের "সব-অথবা-কিছুই-না" সীমাবদ্ধতা থেকে মুক্ত হয়ে, রিঅ্যাক্ট ১৮ ডেভেলপারদের এমন অ্যাপ্লিকেশন তৈরি করতে সক্ষম করে যা কেবল দ্রুত লোড হয় না, বরং চ্যালেঞ্জিং নেটওয়ার্ক কন্ডিশনেও দ্রুত ইন্টারঅ্যাক্ট করে।

মূল শিক্ষণীয় বিষয়গুলো স্পষ্ট:

• এটি প্রতিবন্ধকতা সমাধান করে: সিলেক্টিভ হাইড্রেশন সরাসরি প্রথাগত SSR-এর TTI সমস্যার সমাধান করে।
• ব্যবহারকারীর ইন্টারঅ্যাকশনই রাজা: এটি ব্যবহারকারী কী করছে তার উপর ভিত্তি করে বুদ্ধিমত্তার সাথে হাইড্রেশনকে অগ্রাধিকার দেয়, যার ফলে অ্যাপগুলো তাৎক্ষণিকভাবে প্রতিক্রিয়াশীল মনে হয়।
• কনকারেন্সি দ্বারা সক্ষম: এটি রিঅ্যাক্ট ১৮-এর কনকারেন্ট ইঞ্জিন দ্বারা সম্ভব হয়েছে, যা স্ট্রিমিং SSR এবং ``-এর সাথে কাজ করে।
• একটি বিশ্বব্যাপী সুবিধা: এটি সারা বিশ্বের ব্যবহারকারীদের জন্য যেকোনো ডিভাইসে একটি উল্লেখযোগ্যভাবে ভালো এবং আরও ন্যায্য অভিজ্ঞতা প্রদান করে।

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