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.

Sign up for GitHub

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

Hydrate #83

Merged
merged 4 commits into from
Aug 16, 2023
Merged

Hydrate #83

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
da5de90
hydrate-50%
nafistiham Aug 13, 2023
93e24a0
hydrate-done
nafistiham Aug 13, 2023
17464bb
Update src/content/reference/react-dom/hydrate.md
nafistiham Aug 16, 2023
6e0d719
Update src/content/reference/react-dom/hydrate.md
nafistiham Aug 16, 2023
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
66 changes: 33 additions & 33 deletions src/content/reference/react-dom/hydrate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ title: hydrate

<Deprecated>

This API will be removed in a future major version of React.
এই API ভবিষ্যতে React এর একটি মেজর ভার্সনে সরিয়ে ফেলা হবে।

In React 18, `hydrate` was replaced by [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Using `hydrate` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
React 18 এ, `hydrate` এর জায়গায় এসেছে [`hydrateRoot`।](/reference/react-dom/client/hydrateRoot) React 18 এ `render` ব্যবহার করলে সতর্কতা দেখাবে যে, আপনার অ্যাপ এমন আচরণ করবে যেন এতে React 17 চলছে। আরো জানুন [এখানে।](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)

</Deprecated>

<Intro>

`hydrate` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`](/reference/react-dom/server) in React 17 and below.
`hydrate` আপনাকে React component এমন ব্রাউজার DOM নোডের মধ্যে ডিসপ্লে করার সুযোগ দেয় যার HTML কনটেন্ট React 17 বা তার পূর্ববর্তী কোন ভার্সনের [`react-dom/server`](/reference/react-dom/server) এর সাহায্যে বানানো হয়েছিল।

```js
hydrate(reactNode, domNode, callback?)
Expand All @@ -24,59 +24,59 @@ hydrate(reactNode, domNode, callback?)

---

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

### `hydrate(reactNode, domNode, callback?)` {/*hydrate*/}

Call `hydrate` in React 17 and below to “attach” React to existing HTML that was already rendered by React in a server environment.
React 17 বা তার নিচের কোন ভার্সনে সার্ভার এনভায়রনমেন্টে React এর রেন্ডার করা HTML এর সাথে React "সংযুক্ত" করার জন্য `hydrate` কল করুন।

```js
import { hydrate } from 'react-dom';

hydrate(reactNode, domNode);
```

React will attach to the HTML that exists inside the `domNode`, and take over managing the DOM inside it. An app fully built with React will usually only have one `hydrate` call with its root component.
React `domNode` DOM নোডে থাকা HTML এর সাথে যুক্ত হবে, এবং এর ভেতরের DOM ম্যানেজ করার দায়িত্ব গ্রহণ করবে। সম্পূর্ণরূপে React দিয়ে তৈরি একটি অ্যাপে সাধারণত এর রুট component এর সাথে `hydrate` কল একবারই থাকবে।

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

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

* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `<App />` which was rendered with a `ReactDOM Server` method such as `renderToString(<App />)` in React 17.
* `reactNode`: বিদ্যমান HTML রেন্ডার করার জন্য ব্যবহৃত "React node"। এটা সাধারণত `<App />` এর মত JSX এর একটি অংশ হয়ে থাকে, যা React 17 এ `renderToString(<App />)` এর মত একটি `ReactDOM Server` মেথড ব্যবহার করে রেন্ডার করা।

* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server.
* `domNode`: একটা [DOM এলিমেন্ট](https://developer.mozilla.org/en-US/docs/Web/API/Element) যা সার্ভারে রুট এলিমেন্ট হিসেবে রেন্ডার করা হয়েছিল।

* **optional**: `callback`: A function. If passed, React will call it after your component is hydrated.
* **optional**: `callback`: একটি ফাংশন। যদি পাস করা হয়, আপনার component hydrated হবার পরে React এটাকে কল করবে।

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

`hydrate` returns null.
`hydrate` null রিটার্ন করে।

#### Caveats {/*caveats*/}
* `hydrate` expects the rendered content to be identical with the server-rendered content. React can patch up differences in text content, but you should treat mismatches as bugs and fix them.
* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
* You'll likely have only one `hydrate` call in your app. If you use a framework, it might do this call for you.
* If your app is client-rendered with no HTML rendered already, using `hydrate()` is not supported. Use [render()](/reference/react-dom/render) (for React 17 and below) or [createRoot()](/reference/react-dom/client/createRoot) (for React 18+) instead.
#### সতর্কতা {/*caveats*/}
* `hydrate` প্রত্যাশা করে যে রেন্ডার হওয়া কনটেন্ট সার্ভারে রেন্ডার হওয়া কনটেন্টের সাথে হুবহু মিলে যাবে। টেক্সট কনটেন্টে অমিল React patch up করতে পারে, তবে আপনার উচিত অমিলগুলোকে বাগ হিসেবে বিবেচনা করা এবং সেগুলোকে ঠিক করা।
* ডেভেলপমেন্ট মোডে, React hydration এর সময়ে অমিলের বিষয়ে সতর্কবাণী দেখায়। অমিলের ক্ষেত্রে এট্রিবিউটের ভিন্নতা patch up হবে কি না তার কোন নিশ্চয়তা নেই। এটা পারফরম্যান্সের জন্য দরকার কেননা বেশিরভাগ অ্যাপে, অমিল খুবই বিরল, সুতরাং সকল মার্কাপ ভ্যালিডেট করাটা এতটাই চাপ ফেলবে যে সেটা করা নিষিদ্ধ বলা যায়।
* আপনার অ্যাপে `hydrate` কল এক বারই থাকার কথা। আপনি যদি একটি ফ্রেমওয়ার্ক ব্যবহার করেন, সেটা আপনার জন্য এই কল করে দিতে পারে।
* যদি আপনার অ্যাপ ক্লায়েন্ট-রেন্ডার্ড হয় এবং এতে আগে থেকে কোন HTML রেন্ডার করা না থাকে, `hydrate()` ব্যবহারের সাপোর্ট নেই। [`render()`](/reference/react-dom/render) (React 17 বা তার পূর্ববর্তী ভার্সনের জন্য) অথবা [`createRoot()`](/reference/react-dom/client/createRoot) (React 18+ এ) ব্যবহার করুন বরং।

---

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

Call `hydrate` to attach a <CodeStep step={1}>React component</CodeStep> into a server-rendered <CodeStep step={2}>browser DOM node</CodeStep>.
সার্ভারে রেন্ডার হওয়া <CodeStep step={2}>ব্রাউজার DOM নোডে</CodeStep> <CodeStep step={1}>React component</CodeStep> যুক্ত করার জন্য `hydrate` কল করুন।

```js [[1, 3, "<App />"], [2, 3, "document.getElementById('root')"]]
import { hydrate } from 'react-dom';

hydrate(<App />, document.getElementById('root'));
```

Using `hydrate()` to render a client-only app (an app without server-rendered HTML) is not supported. Use [`render()`](/reference/react-dom/render) (in React 17 and below) or [`createRoot()`](/reference/react-dom/client/createRoot) (in React 18+) instead.
একটি client-only অ্যাপ (সার্ভারে রেন্ডার হওয়া HTML ব্যতীত একটি অ্যাপ) `hydrate()` এর সাহায্যে রেন্ডার করার সাপোর্ট নেই। [`render()`](/reference/react-dom/render) (React 17 বা তার পূর্ববর্তী ভার্সনের জন্য) অথবা [`createRoot()`](/reference/react-dom/client/createRoot) (React 18+ এ) ব্যবহার করুন বরং।

### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/}

In React, "hydration" is how React "attaches" to existing HTML that was already rendered by React in a server environment. During hydration, React will attempt to attach event listeners to the existing markup and take over rendering the app on the client.
React এ, "hydration" হচ্ছে যেভাবে React ইতোমধ্যে সার্ভার এনভায়রনমেন্টে React এর রেন্ডার করা HTML এর সাথে "যুক্ত হয়"। Hydration এর সময়ে, React বিদ্যমান মার্কাপের সাথে ইভেন্ট লিসেনার যুক্ত করার চেষ্টা করবে এবং ক্লায়েন্টে অ্যাপের রেন্ডারিং এর দায়িত্ব নিয়ে নিবে।

In apps fully built with React, **you will usually only hydrate one "root", once at startup for your entire app**.
সম্পূর্ণভাবে React দিয়ে তৈরি অ্যাপসমূহে, **আপনি সাধারণত একটি মাত্র "রুট" hydrate করবেন, একদম শুরুতে আপনার পুরো অ্যাপের জন্য।**

<Sandpack>

Expand Down Expand Up @@ -104,17 +104,17 @@ export default function App() {

</Sandpack>

Usually you shouldn't need to call `hydrate` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState)
সাধারণত আপনার `hydrate` আবার কল দেবার বা আরো জায়গায় কল দেবার প্রয়োজন হবার কথা না। এই জায়গা থেকে, React আপনার অ্যাপ্লিকেশনের DOM ম্যানেজ করবে। UI আপডেটের জন্য, আপনার component গুলো [state ব্যবহার করবে।](/reference/react/useState)

For more information on hydration, see the docs for [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot)
Hydration নিয়ে আরো তথ্য জানতে, [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) এর ডকুমেন্টেশন দেখুন।

---

### Suppressing unavoidable hydration mismatch errors {/*suppressing-unavoidable-hydration-mismatch-errors*/}
### অনিবার্য hydration mismatch error এর দমন {/*suppressing-unavoidable-hydration-mismatch-errors*/}

If a single element’s attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the hydration mismatch warning.
যদি একটি মাত্র এলিমেন্টের এট্রিবিউট অথবা টেক্সট কনটেন্ট অনিবার্যভাবে সার্ভার এবং ক্লায়েন্টে ভিন্ন থাকে (যেমন, টাইমস্ট্যাম্প), তবে আপনি hydration mismatch warning কে সাইলেন্ট রাখতে পারেন।

To silence hydration warnings on an element, add `suppressHydrationWarning={true}`:
কোন এলিমেন্টের hydration সতর্কবাণী সাইলেন্ট করতে চাইলে, `suppressHydrationWarning={true}` যোগ করুনঃ

<Sandpack>

Expand Down Expand Up @@ -146,13 +146,13 @@ export default function App() {

</Sandpack>

This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates.
এটা শুধুমাত্র এক লেভেল গভীরে কাজ করে, এবং এটা একটা escape hatch হবার কথা। এর মাত্রাতিরিক্ত ব্যবহার করবেন না। যদি না এটা টেক্সট কনটেন্ট হয়, React তাও এটাকে patch up করার চেষ্টা করবে না, সুতরাং এটা ভবিষ্যতের কোণ আপডেটের আগ পর্যন্ত ধারাবাহিকতা নাও রক্ষা করতে পারে।

---

### Handling different client and server content {/*handling-different-client-and-server-content*/}
### ভিন্ন ক্লায়েন্ট এবং সার্ভার কনটেন্ট এর হ্যান্ডলিং {/*handling-different-client-and-server-content*/}

If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [effect](/reference/react/useEffect):
আপনার যদি ইচ্ছাকৃতভাবে সার্ভার এবং ক্লায়েন্টে ভিন্ন কনটেন্ট রেন্ডার করার প্রয়োজন পড়ে, আপনি two-pass রেন্ডারিং করতে পারেন। যেসব component ক্লায়েন্টে ভিন্ন কিছু রেন্ডার করে তারা `isClient` এর মত একটি [state ভ্যারিয়েবল](/reference/react/useState) read করে নিতে পারে, যেটা আপনি একটা [effect](/reference/react/useEffect) এ `true` সেট করে দিতে পারেনঃ

<Sandpack>

Expand Down Expand Up @@ -192,10 +192,10 @@ export default function App() {

</Sandpack>

This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration.
এভাবে প্রাথমিক রেন্ডার পাস সার্ভারের মত একই কনটেন্ট রেন্ডার করবে, অমিল এড়িয়ে গিয়ে, কিন্তু hydration এর ঠিক পরেই একটা অতিরিক্ত পাস সিঙ্ক্রোনাসভাবে হবে।

<Pitfall>

This approach makes hydration slower because your components have to render twice. Be mindful of the user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so rendering a different UI immediately after hydration may feel jarring to the user.
এই পদ্ধতি আপনার hydration কে ধীর গতির বানায় কারণ আপনার component গুলোকে দুই বার রেন্ডার হতে হয়। ধীর গতির ইন্টারনেট সংযোগের ক্ষেত্রে ব্যবহারকারীর অভিজ্ঞতার বিষয়ে খেয়াল রাখবেন। প্রাথমিক HTML রেন্ডারের পরে বেশ উল্লেখযোগ্য বিলম্বে জাভাস্ক্রিপ্ট কোড লোড হতে পারে, সুতরাং hydration এর ঠিক পর পর ভিন্ন একটা UI এর রেন্ডারিং ব্যবহারকারীর জন্য বিরক্তিকর হতে পারে।

</Pitfall>