Skip to content

Translate reference/renderToString #153

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

Merged
merged 11 commits into from
Jun 29, 2025
72 changes: 36 additions & 36 deletions src/content/reference/react-dom/server/renderToString.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ title: renderToString

<Pitfall>

`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives)
`renderToString` streaming সাপোর্ট করে না এবং ডেটা (ফেচিং বা কোনো এসিংক্রোনাস কাজ) এর জন্য বিলম্ব করে না [বিকল্প সমূহ দেখুন।](#alternatives)

</Pitfall>

<Intro>

`renderToString` renders a React tree to an HTML string.
`renderToString` একটি React tree কে HTML string হিসেবে রেন্ডার করে।

```js
const html = renderToString(reactNode, options?)
Expand All @@ -22,46 +22,46 @@ const html = renderToString(reactNode, options?)

---

## Reference {/*reference*/}
## রেফারেন্স {/*reference*/}

### `renderToString(reactNode, options?)` {/*rendertostring*/}

On the server, call `renderToString` to render your app to HTML.
আপনার অ্যাপকে HTML এ রেন্ডার করতে, সার্ভার থেকে `renderToString` কল করুন।

```js
import { renderToString } from 'react-dom/server';

const html = renderToString(<App />);
```

On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
সার্ভার-জেনারেটেড HTML কে ইন্টার‍্যাক্টিভ করতে, ক্লায়েন্ট থেকে [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) কল করুন।

[See more examples below.](#usage)
[নিচে আরো উদাহরণ দেখুন।](#usage)

#### Parameters {/*parameters*/}
#### প্যারামিটার্স {/*parameters*/}

* `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<App />`.
* `reactNode`: একটি React node যাকে আপনি HTML এ রেন্ডার করতে চান। উদাহরণস্বরূপ,`<App />` এর মতো একটি JSX node ।

* **optional** `options`: An object for server render.
* **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)
* **অপশনাল** `options`: সার্ভার রেন্ডারের জন্য একটি অবজেক্ট।
* **অপশনাল** `identifierPrefix`: একটি string prefix (উপসর্গ) যেটি React [`useId`](/reference/react/useId) এর দ্বারা জেনারেট করা id এর সঙ্গে ব্যবহার করে। একই পেজে একাধিক root ব্যবহারের সময় আইডির সাথে আইডির সংঘর্ষ এড়াতে এটি উপকারে আসে। এটি [`hydrateRoot`](/reference/react-dom/client/hydrateRoot#parameters) এর কাছে পাস করা prefix এর অবশ্যই অনুরূপ হতে হবে।

#### Returns {/*returns*/}
#### রিটার্নস {/*returns*/}

An HTML string.
একটি HTML স্ট্রিং।

#### Caveats {/*caveats*/}
#### সাবধানতা {/*caveats*/}

* `renderToString` has limited Suspense support. If a component suspends, `renderToString` immediately sends its fallback as HTML.
* `renderToString` এর সীমিত Suspense সাপোর্ট রয়েছে। যদি কোনো কম্পোনেন্ট suspend করে, `renderToString` কোনো বিলম্ব ছাড়াই সেটির fallback কে HTML হিসেবে পাঠিয়ে দেয়।

* `renderToString` works in the browser, but using it in the client code is [not recommended.](#removing-rendertostring-from-the-client-code)
* `renderToString` ব্রাউজারে কাজ করে, কিন্তু ক্লায়েন্ট সাইডে এটির ব্যাবহার [রিকমেন্ডেড না।](#removing-rendertostring-from-the-client-code)

---

## Usage {/*usage*/}
## ব্যাবহার {/*usage*/}

### Rendering a React tree as HTML to a string {/*rendering-a-react-tree-as-html-to-a-string*/}
### একটি React tree কে HTML হিসেবে একটি স্ট্রিং-এ রেন্ডার করা {/*rendering-a-react-tree-as-html-to-a-string*/}

Call `renderToString` to render your app to an HTML string which you can send with your server response:
আপনার সার্ভার রেসপন্সের সাথে পাঠানোর জন্য আপনার অ্যাপকে একটি HTML স্ট্রিং-এ রেন্ডার করতে `renderToString` কল করুনঃ

```js {5-6}
import { renderToString } from 'react-dom/server';
Expand All @@ -73,35 +73,35 @@ app.use('/', (request, response) => {
});
```

This will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive.
এটি আপনার React কম্পোনেন্টগুলির প্রাথমিক নন-ইন্টারেক্টিভ HTML আউটপুট তৈরি করবে। ক্লায়েন্ট সাইডে, আপনাকে সেই সার্ভার-জেনারেটেড HTML কে *হাইড্রেট* এবং ইন্টারেক্টিভ করতে [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) কল করতে হবে।


<Pitfall>

`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives)
`renderToString` streaming সাপোর্ট করে না এবং ডেটা (ফেচিং বা কোনো এসিংক্রোনাস কাজ) এর জন্য বিলম্ব করে না [বিকল্প সমূহ দেখুন।](#alternatives)

</Pitfall>

---

## Alternatives {/*alternatives*/}
## বিকল্প সমূহ {/*alternatives*/}

### Migrating from `renderToString` to a streaming method on the server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/}
### সার্ভারে `renderToString` এর বদলে একটি streaming মেথড ব্যাবহার করা {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/}

`renderToString` returns a string immediately, so it does not support streaming or waiting for data.
`renderToString` সঙ্গে সঙ্গেই একটি স্ট্রিং রিটার্ন করে, তাই এটি স্ট্রিমিং বা ডেটার জন্য অপেক্ষা করা সাপোর্ট করে না।

When possible, we recommend using these fully-featured alternatives:
যখন সম্ভব, আমরা এই fully-featured বিকল্পগুলো ব্যাবহার করা রেকমেন্ড করিঃ

* If you use Node.js, use [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream)
* If you use Deno or a modern edge runtime with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), use [`renderToReadableStream`.](/reference/react-dom/server/renderToReadableStream)
* আপনি যদি Node.js ব্যবহার করেন, তাহলে [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) ব্যবহার করুন।
* আপনি যদি Deno বা [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) সহ একটি আধুনিক Edge রানটাইম ব্যবহার করেন, তাহলে [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) ব্যবহার করুন।

You can continue using `renderToString` if your server environment does not support streams.
আপনার সার্ভার environment যদি stream সাপোর্ট না করে, তাহলে আপনি `renderToString` ব্যবহার চালিয়ে যেতে পারেন।

---

### Removing `renderToString` from the client code {/*removing-rendertostring-from-the-client-code*/}
### ক্লায়েন্ট কোড থেকে `renderToString` দূর করা {/*removing-rendertostring-from-the-client-code*/}

Sometimes, `renderToString` is used on the client to convert some component to HTML.
কখনো কখনো, কোনো কম্পোনেন্টকে HTML-এ রূপান্তর করতে ক্লায়েন্ট-সাইডে `renderToString` ব্যবহার করা হয়।

```js {1-2}
// 🚩 Unnecessary: using renderToString on the client
Expand All @@ -111,7 +111,7 @@ const html = renderToString(<MyIcon />);
console.log(html); // For example, "<svg>...</svg>"
```

Importing `react-dom/server` **on the client** unnecessarily increases your bundle size and should be avoided. If you need to render some component to HTML in the browser, use [`createRoot`](/reference/react-dom/client/createRoot) and read HTML from the DOM:
**ক্লায়েন্ট-সাইডে** `react-dom/server` ইমপোর্ট করা বিনা প্রয়োজনে আপনার বান্ডল সাইজ বাড়িয়ে দেয় এবং এটা এড়ানো উচিত। যদি আপনার ব্রাউজারে কোনো কম্পোনেন্টকে HTML-এ রেন্ডার করতে হয়, তাহলে [`createRoot`](/reference/react-dom/client/createRoot) ব্যবহার করুন এবং DOM থেকে HTML রিড করুনঃ

```js
import { createRoot } from 'react-dom/client';
Expand All @@ -125,17 +125,17 @@ flushSync(() => {
console.log(div.innerHTML); // For example, "<svg>...</svg>"
```

The [`flushSync`](/reference/react-dom/flushSync) call is necessary so that the DOM is updated before reading its [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property.
এখানে [`flushSync`](/reference/react-dom/flushSync) কল করা জরুরী যাতে DOM তার [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) প্রোপার্টি read করার আগে আপডেট হয়।

---

## Troubleshooting {/*troubleshooting*/}
## ট্রাবলশুটিং {/*troubleshooting*/}

### When a component suspends, the HTML always contains a fallback {/*when-a-component-suspends-the-html-always-contains-a-fallback*/}
### যখন একটি কম্পোনেন্ট Suspense এ থাকে, তখন HTML এর সর্বদা একটি ফলব্যাক থাকে {/*when-a-component-suspends-the-html-always-contains-a-fallback*/}

`renderToString` does not fully support Suspense.
`renderToString` পুরোপুরি ভাবে Suspense সাপোর্ট করে না।

If some component suspends (for example, because it's defined with [`lazy`](/reference/react/lazy) or fetches data), `renderToString` will not wait for its content to resolve. Instead, `renderToString` will find the closest [`<Suspense>`](/reference/react/Suspense) boundary above it and render its `fallback` prop in the HTML. The content will not appear until the client code loads.
যদি কোনো কম্পোনেন্ট সাসপেন্স অবস্থায় থাকে (যেমন, যদি এটাকে [`lazy`](/reference/react/lazy) করা হয় কিংবা এটা ডেটা ফেচ করে), তাহলে এর কন্টেন্ট resolve হওয়ার জন্য `renderToString` অপেক্ষা করবে না। পরিবর্তে, `renderToString` উপরের সবচেয়ে কাছের [`<Suspense>`](/reference/react/Suspense) বাউন্ডারি খুঁজে বের করবে এবং HTML-এ এর `fallback` প্রপ রেন্ডার করবে। ক্লায়েন্ট কোড লোড না হওয়া পর্যন্ত ঐ কন্টেন্ট প্রদর্শিত হবে না।

To solve this, use one of the [recommended streaming solutions.](#migrating-from-rendertostring-to-a-streaming-method-on-the-server) They can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads.
এই সমস্যা সমাধান করতে, [রেকমেন্ডেড স্ট্রিমিং সমাধানগুলোর](#migrating-from-rendertostring-to-a-streaming-method-on-the-server) একটি ব্যবহার করুন। এ সমাধানগুলোর ক্ষেত্রে সার্ভারে resolve হওয়ার সাথে সাথে কন্টেন্ট ভাগে ভাগে স্ট্রিম হয়ে আসতে পারবে যাতে ইউজার ক্লায়েন্ট কোড লোড হওয়ার আগেই পৃষ্ঠাটি ক্রমে ক্রমে পূরণ হতে দেখতে পায়।

Loading