hydrateRoot

Author: AhmedBaset

src/content/reference/react-dom/client/hydrateRoot.md

@@ -4,7 +4,7 @@ title: hydrateRoot
 
 <Intro>
 
-تمكنك `hydrateRoot` من عرض مكونات React في عناصر DOM في المتصفح، التي تم توليدها سابقًا باستخدام [`react-dom/server`](/reference/react-dom/server).
+تمكنك `hydrateRoot` من عرض مكونات React في عناصر DOM التي تم توليدها سابقًا باستخدام [`react-dom/server`](/reference/react-dom/server) في المتصفح.
 
 ```js
 const root = hydrateRoot(domNode, reactNode, options?)
@@ -81,7 +81,7 @@ root.render(<App />);
 
 #### ملاحظات {/*root-render-caveats*/}
 
-* إذا استدعيت `root.render` قبل أن ينتهي الجذر من التجميع، فسيقوم React بمسح محتوى HTML المرسوم بالفعل من الخادم وتحويل الجذر بأكمله إلى الرسم  من جانب العميل.
+* إذا استدعيت `root.render` قبل أن ينتهي الجذر من الربط (hydrating)، فسيقوم React بمسح محتوى HTML المرسوم بالفعل من الخادم وتحويل الجذر بأكمله إلى الرسم  من جانب العميل.
 
 ---
 
@@ -120,15 +120,15 @@ root.unmount();
 
 ### ربط HTML تم رسمه بالخادم {/*hydrating-server-rendered-html*/}
 
-إذا تم إنشاء HTML تطبيقك بواسطة [`react-dom/server`](/reference/react-dom/client/createRoot)، فستحتاج إلى *ترطيبه* في جانب الخادم.
+إذا تم إنشاء HTML تطبيقك بواسطة [`react-dom/server`](/reference/react-dom/client/createRoot)، فستحتاج إلى *ربطه* في جانب الخادم.
 
 ```js [[1, 3, "document.getElementById('root')"], [2, 3, "<App />"]]
 import { hydrateRoot } from 'react-dom/client';
 
 hydrateRoot(document.getElementById('root'), <App />);
 ```
 
-سيقوم هذا بترطيب HTML الخادم داخل <CodeStep step={1}>عنصر DOM المتصفح</CodeStep> باستخدام <CodeStep step={2}>مكوِّن React</CodeStep> لتطبيقك. عادةً ما تقوم بفعل ذلك مرة واحدة عند بدء التشغيل. إذا كنت تستخدم إطار عمل ما، فقد يقوم الإطار بعمل هذا الأمر بالنيابة عنك.
+سيقوم هذا بربط HTML الخادم داخل <CodeStep step={1}>عنصر DOM المتصفح</CodeStep> باستخدام <CodeStep step={2}>مكوِّن React</CodeStep> لتطبيقك. عادةً ما تقوم بفعل ذلك مرة واحدة عند بدء التشغيل. إذا كنت تستخدم إطار عمل ما، فقد يقوم الإطار بعمل هذا الأمر بالنيابة عنك.
 
 بهذه الطريقة، سيقوم React بـ "ربط" منطق المكوِّنات الخاصة بك بالـ HTML الأولي الذي تم إنشاؤه من الخادم. يحول الربطُ نسخة HTML الأولية من الخادم إلى تطبيق متفاعل بالكامل يعمل في المتصفح.
 
@@ -183,7 +183,7 @@ function Counter() {
 
 عنصر React الذي تمرره إلى `hydrateRoot` يحتاج إلى إنتاج **نفس النتيجة** التي حققها عند الخادم.
 
-هذا مهم لتجربة المستخدم. سيقضي المستخدم بعض الوقت في النظر إلى HTML الذي تم إنشاؤه من الخادم قبل تحميل كود JavaScript الخاص بك. يخلق الرسم من جانب الخادم وهمًا بأن التطبيق يحمل بشكل أسرع عن طريق عرض نسخة HTML المُمنتج. إظهار محتوى مختلف فجأة يكسر هذا الوهم. لهذا السبب، يجب أن يتطابق إخراج الرسم الخادم مع إخراج الرسم الأولي على العميل.
+هذا مهم لتجربة المستخدم. سيقضي المستخدم بعض الوقت في النظر إلى HTML الذي تم إنشاؤه من الخادم قبل تحميل كود JavaScript الخاص بك. يخلق الرسم من جانب الخادم وهمًا بأن التطبيق يحمل بشكل أسرع عن طريق عرض نسخة HTML المُمنتج. إظهار محتوى مختلف فجأة يكسر هذا الوهم. لهذا السبب، يجب أن يتطابق إخراج رسم الخادم مع إخراج الرسم الأولي على العميل.
 
 أكثر الأسباب شيوعًا التي تؤدي إلى حدوث أخطاء الربط تشمل:
 
@@ -220,7 +220,7 @@ function App() {
 }
 ```
 
-لترطيب المستند بأكمله، مرر الكائن العام (`document`) كأول معامل إلى `hydrateRoot`:
+لربط المستند بأكمله، مرر الكائن العام (`document`) كأول معامل إلى `hydrateRoot`:
 
 ```js {4}
 import { hydrateRoot } from 'react-dom/client';
@@ -231,9 +231,9 @@ hydrateRoot(document, <App />);
 
 ---
 
-### كتم تحذيرات الربط غير المرتبطة بالترطيب {/*suppressing-unavoidable-hydration-mismatch-errors*/}
+### كتم تحذيرات الربط غير المرتبطة بالربط {/*suppressing-unavoidable-hydration-mismatch-errors*/}
 
-إذا كان هناك اختلاف ضروري بين سمة عنصر واحد أو محتوى النص بين الخادم والعميل (على سبيل المثال ، الطابع الزمني)، فيمكنك إسكات تحذيرات الربط غير المرتبطة بالترطيب.
+إذا كان هناك اختلاف ضروري بين سمة عنصر واحد أو محتوى النص بين الخادم والعميل (على سبيل المثال ، الطابع الزمني)، فيمكنك إسكات تحذيرات الربط غير المرتبطة بالربط.
 
 لكتم تحذيرات الربط على عنصر ما، أضف `suppressHydrationWarning={true}`:
 
@@ -313,21 +313,21 @@ export default function App() {
 
 </Sandpack>
 
-بهذه الطريقة، ستقوم عملية الإعادة الأولية بتقديم نفس المحتوى الذي تم تجهيزه على الخادم، مما يمنع حدوث عدم التطابق، لكن سيحدث عبور إضافي بشكل متزامن مباشرة بعد الترطيب.
+بهذه الطريقة، ستقوم عملية الإعادة الأولية بتقديم نفس المحتوى الذي تم تجهيزه على الخادم، مما يمنع حدوث عدم التطابق، لكن سيحدث عبور إضافي بشكل متزامن مباشرة بعد الربط.
 
 <Pitfall>
 
-هذا النهج يجعل عملية الترطيب أبطأ نظرًا لاضطرار مكوناتك إلى عرض نفسها مرتين. كن حذرًا من تجربة المستخدم على اتصالات بطيئة. قد يتم تحميل الأكواد البرمجية بشكل كبير في وقت لاحق من العرض الأولي للصفحة، لذلك قد يشعر المستخدم أن التغيير إلى واجهة مستخدم مختلفة مباشرة بعد الترطيب قد يكون مفاجئًا له.
+هذا النهج يجعل عملية الربط أبطأ نظرًا لاضطرار مكوناتك إلى عرض نفسها مرتين. كن حذرًا من تجربة المستخدم على اتصالات بطيئة. قد يتم تحميل الأكواد البرمجية بشكل كبير في وقت لاحق من العرض الأولي للصفحة، لذلك قد يشعر المستخدم أن التغيير إلى واجهة مستخدم مختلفة مباشرة بعد الربط قد يكون مفاجئًا له.
 
 </Pitfall>
 
 ---
 
-### تحديث مكون جذري مُرطّب {/*updating-a-hydrated-root-component*/}
+### تحديث مكون جذري مربوط {/*updating-a-hydrated-root-component*/}
 
-بعد الانتهاء من ترطيب الجذر، يمكنك استدعاء [`root.render`](#root-render) لتحديث جذر مكون React. **خلافًا لاستخدام [`createRoot`](/reference/react-dom/client/createRoot)، عادةً لن تحتاج إلى القيام بذلك لأن المحتوى الأولي تم عرضه بالفعل كـ HTML.**
+بعد الانتهاء من ربط الجذر، يمكنك استدعاء [`root.render`](#root-render) لتحديث جذر مكون React. **خلافًا لاستخدام [`createRoot`](/reference/react-dom/client/createRoot)، عادةً لن تحتاج إلى القيام بذلك لأن المحتوى الأولي تم عرضه بالفعل كـ HTML.**
 
-إذا استدعيت `root.render` في وقت ما بعد الترطيب، وكانت هيكلة شجرة المكونات مُطابقة لما تم عرضه سابقًا، ستقوم React [بالحفاظ على الحالة](/learn/preserving-and-resetting-state). لاحظ كيف يمكنك الكتابة في الحقل، مما يعني أن التحديثات من استدعاءات `render` المتكررة كل ثانية في هذا المثال لا تؤدي إلى تدمير الحالة:
+إذا استدعيت `root.render` في وقت ما بعد الربط، وكانت هيكلة شجرة المكونات مُطابقة لما تم عرضه سابقًا، ستقوم React [بالحفاظ على الحالة](/learn/preserving-and-resetting-state). لاحظ كيف يمكنك الكتابة في الحقل، مما يعني أن التحديثات من استدعاءات `render` المتكررة كل ثانية في هذا المثال لا تؤدي إلى تدمير الحالة:
 
 <Sandpack>
 
@@ -369,4 +369,4 @@ export default function App({counter}) {
 
 </Sandpack>
 
-غالبًا ما يكون استدعاء [`root.render`](#root-render) على جذر مُرطّب أمرًا غير معتاد. عادةً، ستقوم بـ[تحديث الحالة](/reference/react/useState) داخل أحد المكونات بدلاً من ذلك.
+غالبًا ما يكون استدعاء [`root.render`](#root-render) على جذر مربوط أمرًا غير معتاد. عادةً، ستقوم بـ[تحديث الحالة](/reference/react/useState) داخل أحد المكونات بدلاً من ذلك.