diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index fa63553a4..d0f01fff7 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -24,7 +24,7 @@ title: নতুন প্রোজেক্ট শুরু করুন npx create-next-app@latest -আপনি যদি Next.js এ নতুন হয়ে থাকেন তাহলে তাদের অফিসিয়াল [Next.js tutorial](https://nextjs.org/learn/foundations/about-nextjs) দেখতে পারেন। +আপনি যদি Next.js এ নতুন হয়ে থাকেন তাহলে [learn Next.js course](https://nextjs.org/learn)-টা দেখে ফেলুন। Next.js এর রক্ষণাবেক্ষণের কাজ করে থাকে [Vercel](https://vercel.com/)। যেকোনো Node.js অথবা serverless হোস্টিং, অথবা আপনার নিজস্ব সার্ভারে [একটি Next.js অ্যাপ deploy](https://nextjs.org/docs/deployment) করতে পারবেন। Next.js সম্পূর্ণ [স্ট্যাটিক এক্সপোর্ট](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) সাপোর্ট করে যার কোন সার্ভারের প্রয়োজন নেই। diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index eae3339fd..689787167 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -43,6 +43,9 @@ stream.pipe(response); * `reactNode`: একটা React নোড যেটা আপনি HTML এ রেন্ডার করতে চান। উদাহরণস্বরূপ, `` এর মত একটি JSX এলিমেন্ট। +* **optional** `options`: সার্ভার রেন্ডারের জন্য একটি অবজেক্ট। + * **optional** `identifierPrefix`: [`useId`](/reference/react/useId) দিয়ে বানানো ID এর জন্য React যে স্ট্রিং প্রিফিক্স ব্যবহার করে। একই পেইজে একাধিক রুট ব্যবহার করলে কনফ্লিক্ট এড়াতে এটা কাজে লাগে। এটা আর [`hydrateRoot`](/reference/react-dom/client/hydrateRoot#parameters) এ pass করা প্রিফিক্স একই হতে হবে। + #### রিটার্ন {/*returns*/} একটা [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) যা একটি HTML স্ট্রিং আউটপুট হিসেবে দেয়। diff --git a/src/content/reference/react-dom/server/renderToStaticMarkup.md b/src/content/reference/react-dom/server/renderToStaticMarkup.md index f5f5490e9..28cc9921e 100644 --- a/src/content/reference/react-dom/server/renderToStaticMarkup.md +++ b/src/content/reference/react-dom/server/renderToStaticMarkup.md @@ -35,6 +35,8 @@ const html = renderToStaticMarkup(); #### প্যারামিটার {/*parameters*/} * `reactNode`: একটা React নোড যা আপনি HTML এ রেন্ডার করতে চান। উদাহরণস্বরূপ, `` এর মত একটি JSX নোড। +* **optional** `options`: সার্ভার রেন্ডারের জন্য একটি অবজেক্ট। + * **optional** `identifierPrefix`: [`useId`](/reference/react/useId) দিয়ে বানানো ID এর জন্য React যে স্ট্রিং প্রিফিক্স ব্যবহার করে। একই পেইজে একাধিক রুট ব্যবহার করলে কনফ্লিক্ট এড়াতে এটা কাজে লাগে। #### রিটার্ন {/*returns*/} diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md index 3b026ed02..3d923ac61 100644 --- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md +++ b/src/content/reference/react-dom/server/renderToStaticNodeStream.md @@ -37,6 +37,9 @@ stream.pipe(response); * `reactNode`: একটা React নোড যেটা আপনি HTML এ রেন্ডার করতে চান। যেমন `` এর মত একটি JSX এলিমেন্ট। +* **optional** `options`: সার্ভার রেন্ডারের জন্য একটি অবজেক্ট। + * **optional** `identifierPrefix`: [`useId`](/reference/react/useId) দিয়ে বানানো ID এর জন্য React যে স্ট্রিং প্রিফিক্স ব্যবহার করে। একই পেইজে একাধিক রুট ব্যবহার করলে কনফ্লিক্ট এড়াতে এটা কাজে লাগে। + #### রিটার্ন {/*returns*/} একটা [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) যেটা একটা HTML স্ট্রিং আউটপুট দেয়। ফলাফলে যে HTML পাওয়া যায় সেটা ক্লায়েন্টে hydrate করা যায় না। diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 41bc6a982..e12692943 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -42,6 +42,9 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * `reactNode`: A React node you want to render to HTML. For example, a JSX node like ``. +* **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) + #### Returns {/*returns*/} An HTML string. diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 96a5e25a2..6d3c01674 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -302,3 +302,33 @@ input { margin: 5px; } ``` + +--- + +### Using the same ID prefix on the client and the server {/*using-the-same-id-prefix-on-the-client-and-the-server*/} + +If you [render multiple independent React apps on the same page](#specifying-a-shared-prefix-for-all-generated-ids), and some of these apps are server-rendered, make sure that the `identifierPrefix` you pass to the [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) call on the client side is the same as the `identifierPrefix` you pass to the [server APIs](/reference/react-dom/server) such as [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) + +```js +// Server +import { renderToPipeableStream } from 'react-dom/server'; + +const { pipe } = renderToPipeableStream( + , + { identifierPrefix: 'react-app1' } +); +``` + +```js +// Client +import { hydrateRoot } from 'react-dom/client'; + +const domNode = document.getElementById('root'); +const root = hydrateRoot( + domNode, + reactNode, + { identifierPrefix: 'react-app1' } +); +``` + +You do not need to pass `identifierPrefix` if you only have one React app on the page.