renderToNodeStream

const stream = renderToNodeStream(reactNode)

• রেফারেন্স
  • renderToNodeStream(reactNode)
• ব্যবহার
  • একটা React ট্রি কে HTML হিসেবে একটা Node.js Readable Stream এ রেন্ডার করা

রেফারেন্স

renderToNodeStream(reactNode)

সার্ভারে, Node.js Readable Stream পাবার জন্য renderToNodeStream কল করুন, যেটা আপনি রেসপন্সের মধ্যে pipe করে দিতে পারবেন।

import { renderToNodeStream } from 'react-dom/server';

const stream = renderToNodeStream(<App />);
stream.pipe(response);

ক্লায়েন্টে, সার্ভার থেকে তৈরী HTML ইন্টার‍্যাক্টিভ করতে hydrateRoot কল করুন।

নিচে আরো উদাহরণ দেখুন।

প্যারামিটার

• reactNode: একটা React নোড যেটা আপনি HTML এ রেন্ডার করতে চান। উদাহরণস্বরূপ, <App /> এর মত একটি JSX এলিমেন্ট।

• optional options: সার্ভার রেন্ডারের জন্য একটি অবজেক্ট।

  • optional identifierPrefix: useId দিয়ে বানানো ID এর জন্য React যে স্ট্রিং প্রিফিক্স ব্যবহার করে। একই পেইজে একাধিক রুট ব্যবহার করলে কনফ্লিক্ট এড়াতে এটা কাজে লাগে। এটা আর hydrateRoot এ pass করা প্রিফিক্স একই হতে হবে।

রিটার্ন

একটা Node.js Readable Stream যা একটি HTML স্ট্রিং আউটপুট হিসেবে দেয়।

সতর্কতা

• এই মেথডটি কোন আউটপুট রিটার্ন করবার আগে সকল Suspense boundary এর সম্পূর্ণ হবার জন্য অপেক্ষা করবে।

• React 18 নাগাদ, এই মেথডটি এর সকল আউটপুট বাফার করে, তাই এটা আসলে streaming এর সুবিধা দিতে পারে না। এ কারণেই, এর বদলে renderToPipeableStream ব্যবহার করার জন্য আপনাকে পরামর্শ দেওয়া হচ্ছে।

• রিটার্ন হওয়া stream হচ্ছে utf-8 এ এনকোড করা byte stream। আপনি যদি অন্য কোন এনকোডিং এ stream চান, তাহলে iconv-lite এর মত কোন প্রজেক্ট দেখতে পারেন, যা টেক্সট transcoding এর জন্য transform stream দেয়।

ব্যবহার

একটা React ট্রি কে HTML হিসেবে একটা Node.js Readable Stream এ রেন্ডার করা

একটি Node.js Readable Stream পাবার জন্য renderToNodeStream কল করুন, যেটা আপনি সার্ভার রেসপন্সে pipe করে দিতে পারবেনঃ

import { renderToNodeStream } from 'react-dom/server';

// Route handler syntax আপনার ব্যাকেন্ড ফ্রেমওয়ার্কের উপর নির্ভর করে
app.use('/', (request, response) => {
  const stream = renderToNodeStream(<App />);
  stream.pipe(response);
});

Stream আপনার React কম্পোনেন্টগুলোর প্রাথমিক নন-ইন্টার‍্যাকটিভ HTML আউটপুট তৈরী করবে। ক্লায়েন্টে, সার্ভারে তৈরী হওয়া HTML কে hydrate করতে এবং একে ইন্টার‍্যাকটিভ করতে আপনাকে hydrateRoot কল করতে হবে।