Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render to static node stream #66

Merged
merged 3 commits into from
Jun 27, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions src/content/reference/react-dom/server/renderToStaticNodeStream.md
Original file line number Diff line number Diff line change
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>