Skip to content

Commit 8424285

Browse files
committed
improvements
1 parent fbc89d5 commit 8424285

File tree

2 files changed

+10
-10
lines changed

2 files changed

+10
-10
lines changed

src/content/reference/react/use-client.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ title: "'use client'"
1111

1212
<Intro>
1313

14-
`'use client'` تميز الملفات التي يتم تنفيذ مكوناتها من جانب العميل
14+
`'use client'` تميز الملفات ليتم تنفيذ مكوناتها في جانب العميل
1515

1616
</Intro>
1717

@@ -23,7 +23,7 @@ title: "'use client'"
2323

2424
### `'use client'` {/*use-client*/}
2525

26-
أضف `'use client'` في أعلى ملف لتمييز أن الملف (بما في ذلك أي مكونات فرعية يستخدمها) يتم تنفيذه على العميل، بغض النظر عن المكان الذي يتم استيراده منه.
26+
أضف `'use client'` في أعلى ملف لتمييزه (الملف أو أي مكونات فرعية يحتويها) بأنه يتم تنفيذه عند العميل، بغض النظر عن المكان الذي يتم استيراده منه.
2727

2828
```js
2929
'use client';
@@ -34,27 +34,27 @@ export default function RichTextEditor(props) {
3434
// ...
3535
```
3636
37-
عند استيراد ملف معلّم بعبارة `'use client'` من عنصرٍ مكوّن في الخادم، ستعامل المجمّعات المتوافقة [bundlers](/learn/start-a-new-react-project#bleeding-edge-reace-frameworks) الاستيراد كـ"نقطة الفصل" بين كود الخادم وكود العميل. يمكن للمكونات الموجودة في هذه النقطة أو أسفلها في الرسم البياني للوحدة الأساسية استخدام ميزات React المخصصة للعميل مثل [`useState`](/reference/react/useState).
37+
عند استيراد ملف معلّم بعبارة `'use client'` من مكوّن في الخادم، ستعامل المجمّعات المتوافقة [bundlers](/learn/start-a-new-react-project#bleeding-edge-reace-frameworks) الاستيراد كـ"نقطة الفصل" بين كود الخادم وكود العميل. يمكن للمكونات الموجودة في هذه النقطة أو أسفلها في الرسم البياني للوحدة الأساسية استخدام الميزات React المخصصة للعميل مثل [`useState`](/reference/react/useState).
3838
3939
#### ملاحظات {/*caveats*/}
4040
4141
* ليس من الضرورة إضافة `'use client'` إلى كل ملف يستخدم ميزات React المخصصة للعميل، بل فقط في الملفات التي يتم استيرادها من ملفات عناصر الخادم. `'use client'` تُشير إلى الحدود بين الكود المخصص للخادم والعميل؛ أي مكونات تكون أسفل هذه الحدود في شجرة العناصر ستُنفَذ تلقائيًا على العميل. لكي يتم تقديمها من عناصر الخادم، يجب أن تحتوي المكونات المصدرة من ملفات `'use client'` على خصائص يمكن تسلسلها.
4242
43-
* عند استيراد ملف `'use client'` من ملف خادم، يمكن تقديم القيم المستوردة كمكون React أو تمريرها عبر الـ props إلى مكون عميل. أي استخدام آخر سيثير خطأ.
43+
* عند استيراد ملف `'use client'` من ملف خادم، يمكن تقديم القيم المستوردة كمكون React أو تمريرها عبر الـ props إلى مكون عميل. وأي استخدام آخر سيثير خطأ.
4444
4545
* عند استيراد ملف 'use client' من ملف عميل آخر، فإن التوجيه لا يؤثر. هذا يسمح لك بكتابة مكونات خاصة بالعميل يمكن استخدامها في نفس الوقت من عناصر الخادم والعميل.
4646
47-
* ستصبح جميع الأكواد في ملف `'use client'` وأي وحدات يتم استيرادها (مباشرة أو غير مباشرة) جزءًا من شبكة الوحدات الأساسية للعميل ويجب إرسالها وتنفيذها من قِبل العميل ليتم تقديمها من قبل المستعرض. لتقليل حجم حزمة العميل والاستفادة الكاملة من الخادم، قم بنقل الحالة (والتوجيهات `'use client'`) للأسفل في شجرة العناصر عند الإمكان، وقم بتمرير عناصر الخادم المقدمة [كأطفال (children)](/learn/passing-props-to-a-component#passing-jsx-as-children) إلى عناصر العميل.
47+
* ستصبح جميع الأكواد في ملف `'use client'` وأي وحدات يتم استيرادها (مباشرة أو غير مباشرة) جزءًا من شبكة الوحدات الأساسية للعميل ويجب إرسالها وتنفيذها من قِبل العميل ليتم تقديمها من قبل المستعرض. لتقليل حجم حزمة العميل والاستفادة الكاملة من الخادم، قم بنقل الحالة (والتوجيهات `'use client'`) للأسفل في شجرة العناصر عند الحاجة، وقم بتمرير عناصر الخادم المقدمة [كأطفال (children)](/learn/passing-props-to-a-component#passing-jsx-as-children) إلى عناصر العميل.
4848
49-
* نظرًا لأن الـ props يتم تسلسلها عبر الحدود بين الخادم والعميل، يجب مراعاة أن موقع هذه التوجيهات يمكن أن يؤثر على كمية البيانات المرسلة إلى العميل؛ يُنصح بتجنب هياكل البيانات التي تكون أكبر من اللازم.
49+
* نظرًا لأن الخصائص يتم تسلسلها عبر الحدود بين الخادم والعميل، يجب مراعاة أن موقع هذه التوجيهات يمكن أن يؤثر على كمية البيانات المرسلة إلى العميل؛ يُنصح بتجنب هياكل البيانات التي تكون أكبر من اللازم.
5050
5151
* عادةً، يجب ألا يتم وضع `'use client'` على المكونات مثل `<MarkdownRenderer>` التي لا تستخدم ميزات خاصة بالخادم أو العميل. بهذه الطريقة، يمكنها التقديم حصريًا على الخادم عند استخدامها من عنصر خادم، ولكن ستُضاف إلى حزمة العميل عند استخدامها من عنصر عميل.
5252
53-
* يجب أن تشمل المكتبات التي يتم نشرها على npm `'use client'` على المكونات المصدرة من React التي يمكن تقديمها باستخدام خصائص يمكن تسلسلها وتستخدم ميزات React المخصصة للعميل، للسماح بالاستيراد والتقديم من قِبل عناصر الخادم. وإلا، سيحتاج المستخدمون إلى لف المكونات المكتبة في أكوادهم الخاصة بـ `'use client'` وهذا قد يكون مرهقًا ويمنع المكتبة من نقل الخطط إلى الخادم لاحقًا. عند نشر الملفات المجمَّعة مُسبقًا على npm، تأكد من أن المصدرة معلمة بـ `'use client'`، منفصلة عن أي ملف يحتوي على تصديرات يمكن استخدامها مباشرة على الخادم.
53+
* يجب أن تشمل المكتبات التي يتم نشرها على npm `'use client'` على المكونات المصدرة من React التي يمكن تقديمها باستخدام خصائص يمكن تسلسلها وتستخدم ميزات React المخصصة للعميل، للسماح بالاستيراد والتقديم من قِبل عناصر الخادم. وإلا، سيحتاج المستخدمون إلى لف مكونات المكتبة في أكوادهم الخاصة بـ `'use client'` وهذا قد يكون مرهقًا ويمنع المكتبة من نقل الخطط إلى الخادم لاحقًا. عند نشر الملفات المجمَّعة مُسبقًا على npm، تأكد من أن المكونات المصدرة مبدوءة بـ `'use client'`، منفصلة عن أي ملف يحتوي على تصديرات يمكن استخدامها مباشرة على الخادم.
5454
55-
* ستستمر مكونات العميل في العمل كجزء من عملية تقديم الجانب الخادم (SSR) أو إنشاء الموقع الثابت في وقت التجميع (SSG)، حيث يعملون كعملاء لتحويل الإخراج الأولي لمكونات React إلى HTML يمكن تقديمه قبل تنزيل حزم JavaScript. ولكنها لا يمكنها استخدام ميزات خاصة بالخادم مثل القراءة مباشرةً من قاعدة بيانات.
55+
* ستستمر مكونات العميل في العمل كجزء من عملية تقديم جانب الخادم (SSR) أو إنشاء الموقع الثابت في وقت التجميع (SSG)، حيث يعملون كعملاء لتحويل الإخراج الأولي لمكونات React إلى HTML يمكن تقديمه قبل تنزيل حزم JavaScript. ولكنها لا يمكنها استخدام ميزات خاصة بالخادم مثل القراءة مباشرةً من قاعدة بيانات.
5656
57-
* يجب أن تكون التوجيهات مثل `'use client'` في بداية الملف، قبل أي استيرادات أو أكواد أخرى (يمكن وضع تعليقات فوق التوجيهات). يجب كتابة التوجيهات باستخدام علامات اقتباس فردية أو مزدوجة، وليس علامات backtick. (تنسيق التوجيه `'use xyz'` يشبه إلى حد ما تنسيق اسماء الـ Hooks مثل `useXyz()`، ولكن التشابه صدفة.)
57+
* يجب أن تكون التوجيهات مثل `'use client'` في بداية الملف، قبل أي استيرادات أو أكواد أخرى (يمكن وضع تعليقات فوق التوجيهات). يجب كتابة التوجيهات باستخدام علامات اقتباس فردية أو مزدوجة، وليس علامات backtick. (تنسيق التوجيه `'use xyz'` يشبه إلى حد ما تنسيق اسماء الـ Hooks مثل `useXyz()`، ولكن هذا التشابه مجرد صدفة.)
5858
5959
## الاستخدام {/*usage*/}
6060

src/content/reference/react/use-server.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ title: "'use server'"
2525

2626
### `'use server'` {/*use-server*/}
2727

28-
أضف `'use server';` في أعلى دالة غير متزامنة لتمييز أن الدالة يمكن تنفيذها من قبل العميل.
28+
أضف `'use server';` في أعلى دالة غير متزامنة (async) لتمييز أن الدالة يمكن تنفيذها من قبل العميل.
2929

3030
```js
3131
async function addToCart(data) {

0 commit comments

Comments
 (0)