الفرق بين المراجعتين ل"Next.js/pages"
| سطر 1: | سطر 1: | ||
= الصفحات في Next.js = | = الصفحات في Next.js = | ||
| − | الصفحة هي [[React/react component|مكوّن رياكت]] مصدر عن ملفات موجودة في المجلد <code>pages</code> وتمتلك إحدى الامتدادات التالية: <code>. | + | الصفحة هي [[React/react component|مكوّن رياكت]] مصدر عن ملفات موجودة في المجلد <code>pages</code> وتمتلك إحدى الامتدادات التالية: <code>js.</code> أو <code>jsx.</code> أو <code>ts.</code> أو <code>tsx.</code>. تقترن كل صفحة بمسار يتعلق باسم الملف، فلو أنشأت على سبيل المثال الملف <code>pages/about.js</code> الذي يصّدر مكوّن رياكت التالي، ستتمكن من الوصول إليه من خلال العنوان <code>/about</code>.<syntaxhighlight> |
function About() { | function About() { | ||
return <div>About</div> | return <div>About</div> | ||
| سطر 22: | سطر 22: | ||
ننصح باستخدام التوليد الساكن للشيفرة مقابل التصيير من جانب الخادم لأسباب تتعلق بالأداء. إذ يمكن أن تخزّن الصفحات الموّلدة بالنمط الساكن في شبكات توزيع المحتوى CDN دون أي إعدادات إضافية مما يعزز الأداء. لكن قد تجد أن التصيير من جانب الخادم هو الخيار الوحيد في بعض الحالات. | ننصح باستخدام التوليد الساكن للشيفرة مقابل التصيير من جانب الخادم لأسباب تتعلق بالأداء. إذ يمكن أن تخزّن الصفحات الموّلدة بالنمط الساكن في شبكات توزيع المحتوى CDN دون أي إعدادات إضافية مما يعزز الأداء. لكن قد تجد أن التصيير من جانب الخادم هو الخيار الوحيد في بعض الحالات. | ||
| + | |||
| + | بالإمكان أيضًا استخدام التصيير من جانب العميل Client-side Rendering جتبًا إلى جنب مع التوليد الساكن أو التصيير من جانب الخادم، أي أنه بالإمكان تصيير جزء من الصفحة كليًا بواسطة جافا سكربت منفَّذة من ناحية العميل. لمزيد من المعلومات راجع [[Next.js/data fetching|توثيق إحضار البيانات]]. | ||
| + | |||
| + | == التوليد الساكن للشيفرة في Next.js == | ||
| + | توّلد شيفرة HTML عند استخدام نمط التوليد الساكن أثناء بناء التطبيق. ويعني ذلك من منظور مرحلة الإنتاج أن توليد HTML يجري عند تنفيذ الأمر <code>next build</code>. تُستخدم بعد ذلك هذه الشيفرة مع كل طلب، ويمكن تخزينها مؤقتًا ضمن شبكة توصيل المحتوى. | ||
| + | |||
| + | بالإمكان توليد صفحات تحوي بيانات في Next.js أو لا تحتوي بيانات، لنلق نظرة على ذلك. | ||
[[تصنيف:Next.js]] | [[تصنيف:Next.js]] | ||
مراجعة 17:58، 4 مايو 2022
الصفحات في Next.js
الصفحة هي مكوّن رياكت مصدر عن ملفات موجودة في المجلد pages وتمتلك إحدى الامتدادات التالية: js. أو jsx. أو ts. أو tsx.. تقترن كل صفحة بمسار يتعلق باسم الملف، فلو أنشأت على سبيل المثال الملف pages/about.js الذي يصّدر مكوّن رياكت التالي، ستتمكن من الوصول إليه من خلال العنوان /about.
function About() {
return <div>About</div>
}
export default Aboutصفحات بمسارات ديناميكية: تدعم المسارات الديناميكية للصفحات. فإن انشأت الملف
pages/posts/[id].jsمثلًا ، أمكنك الوصول إليه بكتابة العنوانposts/1أوposts/2وهكذا.
التصيير الأولي للصفحات
تصيّر Next.js الصفحات بشكل أولّي pre-render، ويعني ذلك توليد شيفرة HTML لكل صفحة مسبقًا بدلًا من إلقاء الحمل كاملًا على محّرك جافا سكربت الذي يعمل من طرف العميل. وقد يُحسّن هذا الأمر الأداء، كما يُحسن ترتيب ظهور الصفحة في محرّكات البحث SEO (سيو أفضل).
تُزوَّد شيفرة HTML المولَّدة لكل صفحة بحد أدنى من شيفرة جافا سكربت الضرورية لعملها. وعندما يُحمّل المتصفح الصفحة، ستُنفَّذ شيفرة جافا سكربت لتمنح الصفحة تفاعلية أكبر (تُدعى هذه العملية بالترطيب hydration).
نمطي التصيير الأولي
للتصيير الأولي في Next.js نمطين هما: التوليد الساكن Static Generation والتصيير من جانب الخادم Server-side Rendering ويقتصر الفارق بينهما على اللحظة التي توّّلد فيها شيفرة HTML.
- التوليد الساكن (مُستحسن): توّلد شيفرة HTML وفق هذا النمط أثناء بناء الصفحة ويُعاد استخدامها عند كل طلب.
- التصيير من جانب الخادم: توّلد شيفرة HTML عند كل طلب.
تمنحك Next.js القدرة على اختيار نمط التصيير الأولي لكل صفحة ،و بالتالي ستتمكن من بناء تطبيقات هجينة عندما تستخدم التوليد الساكن لمعظم صفحاته وتجعل تصيير بعضها الآخر من جانب الخادم.
ننصح باستخدام التوليد الساكن للشيفرة مقابل التصيير من جانب الخادم لأسباب تتعلق بالأداء. إذ يمكن أن تخزّن الصفحات الموّلدة بالنمط الساكن في شبكات توزيع المحتوى CDN دون أي إعدادات إضافية مما يعزز الأداء. لكن قد تجد أن التصيير من جانب الخادم هو الخيار الوحيد في بعض الحالات.
بالإمكان أيضًا استخدام التصيير من جانب العميل Client-side Rendering جتبًا إلى جنب مع التوليد الساكن أو التصيير من جانب الخادم، أي أنه بالإمكان تصيير جزء من الصفحة كليًا بواسطة جافا سكربت منفَّذة من ناحية العميل. لمزيد من المعلومات راجع توثيق إحضار البيانات.
التوليد الساكن للشيفرة في Next.js
توّلد شيفرة HTML عند استخدام نمط التوليد الساكن أثناء بناء التطبيق. ويعني ذلك من منظور مرحلة الإنتاج أن توليد HTML يجري عند تنفيذ الأمر next build. تُستخدم بعد ذلك هذه الشيفرة مع كل طلب، ويمكن تخزينها مؤقتًا ضمن شبكة توصيل المحتوى.
بالإمكان توليد صفحات تحوي بيانات في Next.js أو لا تحتوي بيانات، لنلق نظرة على ذلك.