From b79b9a409562c1db4150d7dc7a9c19886a5331f9 Mon Sep 17 00:00:00 2001 From: habibium Date: Fri, 11 Jul 2025 18:19:12 +0600 Subject: [PATCH 01/12] translate intro and note --- .../reference/react-dom/server/renderToPipeableStream.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 7d0d1ab3d..0c4939f0b 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -4,7 +4,7 @@ title: renderToPipeableStream -`renderToPipeableStream` renders a React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html) +`renderToPipeableStream` একটি React tree কে একটি pipeable [Node.js Stream.](https://nodejs.org/api/stream.html) এ রেন্ডার করে। ```js const { pipe, abort } = renderToPipeableStream(reactNode, options?) @@ -16,7 +16,7 @@ const { pipe, abort } = renderToPipeableStream(reactNode, options?) -This API is specific to Node.js. Environments with [Web Streams,](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) like Deno and modern edge runtimes, should use [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) instead. +এই API শুধুমাত্র Node.js এর জন্য। [Web Streams,](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) এর মতো environment, যেমন Deno এবং আধুনিক Edge রানটাইমে, [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) ব্যবহার করা উচিত। From d443745d3a3cb07b34207bee50b287cb7efe8b62 Mon Sep 17 00:00:00 2001 From: habibium Date: Thu, 17 Jul 2025 04:27:36 +0600 Subject: [PATCH 02/12] translate reference and 2 items from parameters section --- .../react-dom/server/renderToPipeableStream.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 0c4939f0b..418fd4558 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -22,11 +22,11 @@ const { pipe, abort } = renderToPipeableStream(reactNode, options?) --- -## Reference {/*reference*/} +## রেফারেন্স {/*reference*/} ### `renderToPipeableStream(reactNode, options?)` {/*rendertopipeablestream*/} -Call `renderToPipeableStream` to render your React tree as HTML into a [Node.js Stream.](https://nodejs.org/api/stream.html#writable-streams) +আপনার React tree কে একটি [Node.js Stream](https://nodejs.org/api/stream.html#writable-streams) এ HTML হিসেবে রেন্ডার করতে `renderToPipeableStream` কল করুন। ```js import { renderToPipeableStream } from 'react-dom/server'; @@ -40,16 +40,16 @@ const { pipe } = renderToPipeableStream(, { }); ``` -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. +Client-side এ, server-generated HTML কে ইন্টার‍্যাক্টিভ করতে [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) কল করুন। -[See more examples below.](#usage) +[নিচে আরও উদাহরণ দেখুন।](#usage) #### 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`: একটি React node যেটিকে আপনি HTML এ রেন্ডার করতে চান। উদাহরণস্বরূপ, `` এর মতো একটি JSX element । এটা এক্সপেক্টেড যে, এটি পুরো document কে ধারণ করবে, তাই `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) +Client এ, আপনার bootstrap script যেন [`hydrateRoot` কল করে পুরো `document` hydrate করে:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) ```js [[1, 4, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -133,7 +133,7 @@ import App from './App.js'; hydrateRoot(document, ); ``` -This will attach event listeners to the server-generated HTML and make it interactive. +এটি server-generated HTML এ event listener attach করবে এবং এটিকে interactive করে তুলবে। From 318d1016958792449573904120c760fa4fd76e65 Mon Sep 17 00:00:00 2001 From: habibium Date: Fri, 18 Jul 2025 01:03:22 +0600 Subject: [PATCH 07/12] translate Deep Dive --- .../react-dom/server/renderToPipeableStream.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index d65de69a6..fff3665b4 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -137,11 +137,11 @@ hydrateRoot(document, ); -#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/} +#### Build output থেকে CSS এবং JS asset path read করা {/*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. +Final asset URL গুলো (যেমন JavaScript এবং CSS file) প্রায়ই build এর পর hash করা হয়। উদাহরণস্বরূপ, `styles.css` এর পরিবর্তে আপনি `styles.123456.css` পেতে পারেন। Static asset filename hash করা নিশ্চিত করে যে একই asset এর প্রতিটি আলাদা build এর আলাদা filename থাকবে। এটি উপকারী কারণ এটি আপনাকে static asset এর জন্য safely long-term caching enable করতে দেয়: একটি নির্দিষ্ট নামের file এর content কখনো পরিবর্তন হবে না। -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: +তবে, build এর পর পর্যন্ত যদি আপনি asset URL গুলো না জানেন, তাহলে source code এ সেগুলো রাখার কোনো উপায় নেই। উদাহরণস্বরূপ, আগের মতো JSX এ `"/styles.css"` hardcode করা কাজ করবে না। এগুলো আপনার source code থেকে দূরে রাখতে, আপনার root component একটি prop হিসেবে পাস করা map থেকে আসল filename গুলো read করতে পারে: ```js {1,6} export default function App({ assetMap }) { @@ -158,7 +158,7 @@ export default function App({ assetMap }) { } ``` -On the server, render `` and pass your `assetMap` with the asset URLs: +Server এ, `` render করুন এবং asset 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. @@ -178,7 +178,7 @@ app.use('/', (request, response) => { }); ``` -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: +যেহেতু আপনার server এখন `` render করছে, hydration error এড়াতে client এও `assetMap` সহ এটি render করতে হবে। আপনি এইভাবে `assetMap` serialize করে client এ পাস করতে পারেন: ```js {9-10} // You'd need to get this JSON from your build tooling. @@ -200,7 +200,7 @@ app.use('/', (request, response) => { }); ``` -In the example above, the `bootstrapScriptContent` option adds an extra inline ` ``` -Client এ, আপনার bootstrap script যেন [`hydrateRoot` কল করে পুরো `document` hydrate করে:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) +Client এ, আপনার bootstrap script যেন [`hydrateRoot` কল করে পুরো `document` hydrate করেঃ](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) ```js [[1, 4, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -158,7 +158,7 @@ export default function App({ assetMap }) { } ``` -Server এ, `` render করুন এবং asset URL গুলো সহ আপনার `assetMap` পাস করুন: +Server এ, `` render করুন এবং asset 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. @@ -215,9 +215,9 @@ Client এবং server উভয়েই একই `assetMap` prop সহ `App --- -### Streaming more content as it loads {/*streaming-more-content-as-it-loads*/} +### Load হতে হতে আরো content stream করা {/*streaming-more-content-as-it-loads*/} -Streaming allows the user to start seeing the content even before all the data has loaded on the server. For example, consider a profile page that shows a cover, a sidebar with friends and photos, and a list of posts: +Streaming ইউজারকে সকল ডাটা সার্ভারে লোড হওয়ার আগেই কন্টেন্ট দেখতে দেয়। উদাহরণস্বরূপ, একটি profile page এর কথা ভাবুন যেটি একটি cover, friend এবং photo সহ একটি sidebar, এবং post এর একটি লিস্ট দেখায়ঃ ```js function ProfilePage() { From 58bde48b5b201eefd5394127e96aa49b76827f2a Mon Sep 17 00:00:00 2001 From: habibium Date: Fri, 18 Jul 2025 03:17:01 +0600 Subject: [PATCH 09/12] translate loading data explanation in renderToPipeableStream.md --- .../reference/react-dom/server/renderToPipeableStream.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 5b4830a4b..581e10a30 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -234,7 +234,7 @@ function ProfilePage() { } ``` -Imagine that loading data for `` takes some time. Ideally, you'd want to show the rest of the profile page content to the user without waiting for the posts. To do this, [wrap `Posts` in a `` boundary:](/reference/react/Suspense#displaying-a-fallback-while-content-is-loading) +ধরুন যে `` এর জন্য data লোড হতে কিছু সময় লাগে। স্বাভাবিকভাবে, আপনি post এর জন্য অপেক্ষা না করে user কে profile page এর বাকি content দেখাতে চাইবেন। এটি করতে, [`Posts` কে একটি `` boundary তে wrap করুন:](/reference/react/Suspense#displaying-a-fallback-while-content-is-loading) ```js {9,11} function ProfilePage() { @@ -253,9 +253,9 @@ function ProfilePage() { } ``` -This tells React to start streaming the HTML before `Posts` loads its data. React will send the HTML for the loading fallback (`PostsGlimmer`) first, and then, when `Posts` finishes loading its data, React will send the remaining HTML along with an inline `