Render to static node stream by nafistiham · Pull Request #66 · reactjs/bn.react.dev
Expand Up
@@ -4,7 +4,7 @@ title: renderToStaticNodeStream
<Intro>
`renderToStaticNodeStream` renders a non-interactive React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams) `renderToStaticNodeStream` একটি নন-ইন্টার্যাকটিভ React ট্রি কে একটি [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams) এ রেন্ডার করে।
```js const stream = renderToStaticNodeStream(reactNode) Expand All @@ -16,11 +16,11 @@ const stream = renderToStaticNodeStream(reactNode)
---
## Reference {/*reference*/} ## রেফারেন্স {/*reference*/}
### `renderToStaticNodeStream(reactNode)` {/*rendertostaticnodestream*/}
On the server, call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams). সার্ভারে, [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) পাবার জন্য `renderToStaticNodeStream` কল করুন।
```js import { renderToStaticNodeStream } from 'react-dom/server'; Expand All @@ -29,52 +29,52 @@ const stream = renderToStaticNodeStream(<Page />); stream.pipe(response); ```
[See more examples below.](#usage) [নিচে আরো উদাহরণ দেখুন।](#usage)
The stream will produce non-interactive HTML output of your React components. এই stream আপনার React কম্পোনেন্ট থেকে নন-ইন্টার্যাকটিভ HTML আউটপুট তৈরি করবে।
#### Parameters {/*parameters*/} #### প্যারামিটার {/*parameters*/}
* `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<Page />`. * `reactNode`: একটা React নোড যেটা আপনি HTML এ রেন্ডার করতে চান। যেমন `<Page />` এর মত একটি JSX এলিমেন্ট।
#### Returns {/*returns*/} #### রিটার্ন {/*returns*/}
A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string. The resulting HTML can't be hydrated on the client. একটা [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) যেটা একটা HTML স্ট্রিং আউটপুট দেয়। ফলাফলে যে HTML পাওয়া যায় সেটা ক্লায়েন্টে hydrate করা যায় না।
#### Caveats {/*caveats*/}
* `renderToStaticNodeStream` output cannot be hydrated. * `renderToStaticNodeStream` আউটপুট hydrate করা যায় না।
* This method will wait for all [Suspense boundaries](/reference/react/Suspense) to complete before returning any output. * এই মেথডটি কোন আউটপুট রিটার্ন করবার আগে সকল [Suspense boundary](/reference/react/Suspense) এর সম্পূর্ণ হবার জন্য অপেক্ষা করবে।
* As of React 18, this method buffers all of its output, so it doesn't actually provide any streaming benefits. * React 18 নাগাদ, এই মেথডটি এর সকল আউটপুট বাফার করে, তাই এটা আসলে streaming এর সুবিধা দিতে পারে না।
* The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text. * রিটার্ন হওয়া stream হচ্ছে utf-8 এ এনকোড করা byte stream। আপনি যদি অন্য কোন এনকোডিং এ stream চান, তাহলে [iconv-lite](https://www.npmjs.com/package/iconv-lite) এর মত কোন প্রজেক্ট দেখতে পারেন, যা টেক্সট transcoding এর জন্য transform stream দেয়।
---
## Usage {/*usage*/} ## ব্যবহার {/*usage*/}
### Rendering a React tree as static HTML to a Node.js Readable Stream {/*rendering-a-react-tree-as-static-html-to-a-nodejs-readable-stream*/} ### একটা React ট্রি কে HTML হিসেবে একটা Node.js Readable Stream এ রেন্ডার করা {/*rendering-a-react-tree-as-html-to-a-nodejs-readable-stream*/}
Call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe to your server response: একটি [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) পাবার জন্য `renderToStaticNodeStream` কল করুন, যেটা আপনি সার্ভার রেসপন্সে pipe করে দিতে পারবেনঃ
```js {5-6} import { renderToStaticNodeStream } from 'react-dom/server';
// The route handler syntax depends on your backend framework // Route handler syntax আপনার ব্যাকেন্ড ফ্রেমওয়ার্কের উপর নির্ভর করে app.use('/', (request, response) => { const stream = renderToStaticNodeStream(<Page />); stream.pipe(response); }); ```
The stream will produce the initial non-interactive HTML output of your React components. Stream টি আপনার React কম্পোনেন্টগুলোর প্রাথমিক নন-ইন্টার্যাকটিভ HTML আউটপুট তৈরী করবে।
<Pitfall>
This method renders **non-interactive HTML that cannot be hydrated.** This is useful if you want to use React as a simple static page generator, or if you're rendering completely static content like emails. এই মেথডটি রেন্ডার করে **নন-ইন্টার্যাকটিভ HTML যা hydrate করা যায় না।** এটা কাজে লাগে যদি আপনি React কে simple static page generator হিসেবে ব্যবহার করতে চান, অথবা আপনি ইমেইলের মত সম্পূর্ণ static কন্টেন্ট রেন্ডার করছেন।
Interactive apps should use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) on the server and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) on the client. ইন্টার্যাকটিভ অ্যাপের উচিত সার্ভারে [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) এবং ক্লায়েন্টে [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) ব্যবহার করা।
</Pitfall>
<Intro>
`renderToStaticNodeStream` renders a non-interactive React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams) `renderToStaticNodeStream` একটি নন-ইন্টার্যাকটিভ React ট্রি কে একটি [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams) এ রেন্ডার করে।
```js const stream = renderToStaticNodeStream(reactNode) Expand All @@ -16,11 +16,11 @@ const stream = renderToStaticNodeStream(reactNode)
---
## Reference {/*reference*/} ## রেফারেন্স {/*reference*/}
### `renderToStaticNodeStream(reactNode)` {/*rendertostaticnodestream*/}
On the server, call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams). সার্ভারে, [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) পাবার জন্য `renderToStaticNodeStream` কল করুন।
```js import { renderToStaticNodeStream } from 'react-dom/server'; Expand All @@ -29,52 +29,52 @@ const stream = renderToStaticNodeStream(<Page />); stream.pipe(response); ```
[See more examples below.](#usage) [নিচে আরো উদাহরণ দেখুন।](#usage)
The stream will produce non-interactive HTML output of your React components. এই stream আপনার React কম্পোনেন্ট থেকে নন-ইন্টার্যাকটিভ HTML আউটপুট তৈরি করবে।
#### Parameters {/*parameters*/} #### প্যারামিটার {/*parameters*/}
* `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<Page />`. * `reactNode`: একটা React নোড যেটা আপনি HTML এ রেন্ডার করতে চান। যেমন `<Page />` এর মত একটি JSX এলিমেন্ট।
#### Returns {/*returns*/} #### রিটার্ন {/*returns*/}
A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string. The resulting HTML can't be hydrated on the client. একটা [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) যেটা একটা HTML স্ট্রিং আউটপুট দেয়। ফলাফলে যে HTML পাওয়া যায় সেটা ক্লায়েন্টে hydrate করা যায় না।
#### Caveats {/*caveats*/}
* `renderToStaticNodeStream` output cannot be hydrated. * `renderToStaticNodeStream` আউটপুট hydrate করা যায় না।
* This method will wait for all [Suspense boundaries](/reference/react/Suspense) to complete before returning any output. * এই মেথডটি কোন আউটপুট রিটার্ন করবার আগে সকল [Suspense boundary](/reference/react/Suspense) এর সম্পূর্ণ হবার জন্য অপেক্ষা করবে।
* As of React 18, this method buffers all of its output, so it doesn't actually provide any streaming benefits. * React 18 নাগাদ, এই মেথডটি এর সকল আউটপুট বাফার করে, তাই এটা আসলে streaming এর সুবিধা দিতে পারে না।
* The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text. * রিটার্ন হওয়া stream হচ্ছে utf-8 এ এনকোড করা byte stream। আপনি যদি অন্য কোন এনকোডিং এ stream চান, তাহলে [iconv-lite](https://www.npmjs.com/package/iconv-lite) এর মত কোন প্রজেক্ট দেখতে পারেন, যা টেক্সট transcoding এর জন্য transform stream দেয়।
---
## Usage {/*usage*/} ## ব্যবহার {/*usage*/}
### Rendering a React tree as static HTML to a Node.js Readable Stream {/*rendering-a-react-tree-as-static-html-to-a-nodejs-readable-stream*/} ### একটা React ট্রি কে HTML হিসেবে একটা Node.js Readable Stream এ রেন্ডার করা {/*rendering-a-react-tree-as-html-to-a-nodejs-readable-stream*/}
Call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe to your server response: একটি [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) পাবার জন্য `renderToStaticNodeStream` কল করুন, যেটা আপনি সার্ভার রেসপন্সে pipe করে দিতে পারবেনঃ
```js {5-6} import { renderToStaticNodeStream } from 'react-dom/server';
// The route handler syntax depends on your backend framework // Route handler syntax আপনার ব্যাকেন্ড ফ্রেমওয়ার্কের উপর নির্ভর করে app.use('/', (request, response) => { const stream = renderToStaticNodeStream(<Page />); stream.pipe(response); }); ```
The stream will produce the initial non-interactive HTML output of your React components. Stream টি আপনার React কম্পোনেন্টগুলোর প্রাথমিক নন-ইন্টার্যাকটিভ HTML আউটপুট তৈরী করবে।
<Pitfall>
This method renders **non-interactive HTML that cannot be hydrated.** This is useful if you want to use React as a simple static page generator, or if you're rendering completely static content like emails. এই মেথডটি রেন্ডার করে **নন-ইন্টার্যাকটিভ HTML যা hydrate করা যায় না।** এটা কাজে লাগে যদি আপনি React কে simple static page generator হিসেবে ব্যবহার করতে চান, অথবা আপনি ইমেইলের মত সম্পূর্ণ static কন্টেন্ট রেন্ডার করছেন।
Interactive apps should use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) on the server and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) on the client. ইন্টার্যাকটিভ অ্যাপের উচিত সার্ভারে [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) এবং ক্লায়েন্টে [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) ব্যবহার করা।
</Pitfall>