From 39deaf0496f4671f9696a0132e79dcfaa97e9e80 Mon Sep 17 00:00:00 2001 From: habibium Date: Thu, 29 Oct 2026 15:06:18 +0600 Subject: [PATCH 01/13] translate intro --- .../react-dom/server/renderToReadableStream.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index 1771b1d3b..cbe29923a 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -4,7 +4,7 @@ title: renderToReadableStream -`renderToReadableStream` renders a React tree to a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) +`renderToReadableStream` একটি রিয়েক্ট ট্রিকে একটি [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) এ রেন্ডার করে। ```js const stream = await renderToReadableStream(reactNode, options?) @@ -16,17 +16,17 @@ const stream = await renderToReadableStream(reactNode, options?) -This API depends on [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) For Node.js, use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead. +এই API [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) এর উপর নির্ভর করে। Node.js এর জন্য, এর পরিবর্তে [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) ব্যবহার করুন। --- -## Reference {/*reference*/} +## রেফারেন্স {/*reference*/} ### `renderToReadableStream(reactNode, options?)` {/*rendertoreadablestream*/} -Call `renderToReadableStream` to render your React tree as HTML into a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) +আপনার রিয়েক্ট ট্রিকে HTML হিসেবে একটি [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) এ রেন্ডার করতে `renderToReadableStream` কল করুন। ```js import { renderToReadableStream } from 'react-dom/server'; @@ -41,9 +41,9 @@ async function handler(request) { } ``` -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*/} From 80e9e625bd6d933dcaa26c74cc7f19c1a6f1d3f0 Mon Sep 17 00:00:00 2001 From: habibium Date: Thu, 29 Oct 2026 15:07:08 +0600 Subject: [PATCH 02/13] translate parameters and returns --- .../server/renderToReadableStream.md | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index cbe29923a..63c72d273 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -45,37 +45,37 @@ async function handler(request) { [নিচে আরও উদাহরণ দেখুন।](#usage) -#### Parameters {/*parameters*/} +#### প্যারামিটারস {/*parameters*/} -* `reactNode`: A React node you want to render to HTML. For example, a JSX element like ``. It is expected to represent the entire document, so the `App` component should render the `` tag. +* `reactNode`: একটি রিয়েক্ট নোড যেটিকে আপনি HTML এ রেন্ডার করতে চান। উদাহরণস্বরূপ, `` এর মতো একটি JSX এলিমেন্ট। এটা প্রত্যাশিত যে, এটি পুরো ডকুমেন্টকে ধারণ করবে, তাই `App` কম্পোনেন্টটির `` ট্যাগ রেন্ডার করার কথা। -* **optional** `options`: An object with streaming options. - * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline ` ``` -On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) +ক্লায়েন্টে, আপনার বুটস্ট্র্যাপ স্ক্রিপ্টের উচিত [`hydrateRoot` কল করে পুরো `document` হাইড্রেট করা:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) ```js [[1, 4, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -139,15 +139,15 @@ import App from './App.js'; hydrateRoot(document, ); ``` -This will attach event listeners to the server-generated HTML and make it interactive. +এটি সার্ভারে জেনারেট হওয়া HTML এ ইভেন্ট লিসেনার যুক্ত করবে এবং এটিকে ইন্টারঅ্যাক্টিভ করে তুলবে। -#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/} +#### বিল্ড আউটপুট থেকে CSS এবং JS অ্যাসেট পাথ রিড করা {/*reading-css-and-js-asset-paths-from-the-build-output*/} -The final asset URLs (like JavaScript and CSS files) are often hashed after the build. For example, instead of `styles.css` you might end up with `styles.123456.css`. Hashing static asset filenames guarantees that every distinct build of the same asset will have a different filename. This is useful because it lets you safely enable long-term caching for static assets: a file with a certain name would never change content. +চূড়ান্ত অ্যাসেট URL গুলো (যেমন JavaScript এবং CSS ফাইল) প্রায়ই বিল্ডের পরে হ্যাশ করা হয়। উদাহরণস্বরূপ, `styles.css` এর পরিবর্তে আপনি হয়তো `styles.123456.css` পাবেন। স্ট্যাটিক অ্যাসেটের ফাইলনেম হ্যাশ করা নিশ্চিত করে যে একই অ্যাসেটের প্রতিটি আলাদা বিল্ডের ফাইলনেম আলাদা হবে। এটি উপকারী কারণ এটি আপনাকে স্ট্যাটিক অ্যাসেটের জন্য নিরাপদে লং-টার্ম ক্যাশিং (long-term caching) চালু করতে দেয়: একটি নির্দিষ্ট নামের ফাইলের কনটেন্ট কখনো পরিবর্তন হবে না। -However, if you don't know the asset URLs until after the build, there's no way for you to put them in the source code. For example, hardcoding `"/styles.css"` into JSX like earlier wouldn't work. To keep them out of your source code, your root component can read the real filenames from a map passed as a prop: +তবে, বিল্ড হওয়ার আগ পর্যন্ত যদি আপনি অ্যাসেট URL গুলো না জানেন, তাহলে সেগুলো সোর্স কোডে রাখার কোনো উপায় নেই। উদাহরণস্বরূপ, আগের মতো JSX এ `"/styles.css"` হার্ডকোড করা কাজ করবে না। এগুলোকে আপনার সোর্স কোডের বাইরে রাখতে, আপনার রুট কম্পোনেন্ট একটি প্রপ হিসেবে পাস করা ম্যাপ থেকে আসল ফাইলনেমগুলো রিড করতে পারে: ```js {1,6} export default function App({ assetMap }) { @@ -163,7 +163,7 @@ export default function App({ assetMap }) { } ``` -On the server, render `` and pass your `assetMap` with the asset URLs: +সার্ভারে, `` রেন্ডার করুন এবং অ্যাসেট URL গুলোসহ আপনার `assetMap` পাস করুন: ```js {1-5,8,9} // You'd need to get this JSON from your build tooling, e.g. read it from the build output. @@ -182,7 +182,7 @@ async function handler(request) { } ``` -Since your server is now rendering ``, you need to render it with `assetMap` on the client too to avoid hydration errors. You can serialize and pass `assetMap` to the client like this: +যেহেতু আপনার সার্ভার এখন `` রেন্ডার করছে, তাই হাইড্রেশন এরর এড়াতে আপনাকে ক্লায়েন্টেও `assetMap` সহ এটি রেন্ডার করতে হবে। আপনি এভাবে `assetMap` সিরিয়ালাইজ (serialize) করে ক্লায়েন্টে পাস করতে পারেন: ```js {9-10} // You'd need to get this JSON from your build tooling. @@ -203,7 +203,7 @@ async function handler(request) { } ``` -In the example above, the `bootstrapScriptContent` option adds an extra inline ` ``` -ক্লায়েন্টে, আপনার বুটস্ট্র্যাপ স্ক্রিপ্টের উচিত [`hydrateRoot` কল করে পুরো `document` হাইড্রেট করা:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) +ক্লায়েন্টে, আপনার বুটস্ট্র‍্যাপ স্ক্রিপ্টের উচিত [`hydrateRoot` কল করে পুরো `document` হাইড্রেট করা:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) ```js [[1, 4, ""]] import { hydrateRoot } from 'react-dom/client';