كيف يرتبط أحدهما بالآخر
React مكتبة لبناء واجهات المستخدم من مكوّنات. وهي وحدها لا تحدد كيف تُوجَّه الصفحات، ولا أين تُولَّد، ولا كيف تُجلب البيانات. والتطبيق الذي يستخدم React دون إطار عمل يكون في العادة تطبيق صفحة واحدة: يحمّل المتصفح الشيفرة، ثم تُبنى الواجهة على جهاز الزائر.
أما Next.js فإطار عمل يستخدم React ويضيف هذه القرارات. فهو يستطيع توليد الصفحات على الخادم، أو إعدادها مسبقاً، أو توليدها في المتصفح، صفحة بصفحة. ويشمل كذلك توجيه الصفحات، ومعالجة الصور، ومكاناً لكتابة شيفرة الخادم. ومن يختار Next.js يبقى مختاراً React، فمكوّناتك ومهارات فريقك تنتقل معك.
مقارنة سريعة بين الخيارين
| React كتطبيق صفحة واحدة | إطار Next.js | |
|---|---|---|
| أين تُولَّد الصفحات | في المتصفح | على الخادم، أو عند البناء، أو في المتصفح، بحسب كل صفحة |
| التحميل الأول | يجب أن يحمّل المتصفح التطبيق ويشغّله قبل أن يظهر المحتوى | يمكن أن يصل المحتوى جاهزاً بصيغة HTML |
| الظهور في البحث | يتوقف على تشغيل محركات البحث لشيفرة JavaScript | المحتوى موجود في HTML الذي يرسله الخادم |
| الاستضافة | ملفات ثابتة على أي استضافة ويب أو شبكة توزيع محتوى (CDN) | خادم Node.js أو منصة تدعمه. والتصدير الثابت ممكن لبعض المواقع |
| الجانب الخلفي | يلزم وجود واجهة برمجة (API) منفصلة | يمكن أن تكون شيفرة الخادم في المشروع نفسه، أو أن تستدعي واجهة برمجة منفصلة |
| الأعراف البرمجية | تختار أنت توجيه الصفحات وجلب البيانات والهيكل | يحددها إطار العمل |
| الترقيات | ترقّي المكتبات التي اخترتها | تتبع إصدارات إطار العمل، وقد تغيّر أعرافه |
متى يناسبك كل خيار
اختر React وحده حين
- يكون التطبيق كله خلف تسجيل الدخول، مثل لوحة بيانات داخلية أو أداة إدارة
- لا تحتاج محركات البحث إلى رؤيته أبداً
- يتصرف كبرامج سطح المكتب، مع بيانات حالة كثيرة تُدار في المتصفح
- تكون لديك أصلاً واجهة خلفية وواجهة برمجة منفصلتان
- سيُدمج داخل غلاف آخر، مثل غلاف لسطح المكتب أو للجوال
اختر Next.js حين
- يجب أن تظهر الصفحات العامة في البحث، وأن تُشارَك بمعاينات
- تهمك سرعة التحميل الأول، في صفحات التسويق أو التجارة مثلاً
- يجمع منتج واحد بين صفحات عامة وتطبيق يتطلب تسجيل الدخول
- تريد شيفرة الخادم وشيفرة الواجهة في مشروع واحد
- يأتي المحتوى من نظام لإدارة المحتوى (CMS)، ويجب توليد الصفحات منه
ما الذي يتغير لفريق في مؤسسة كبيرة
في المؤسسات الأكبر، يؤثر اختيار إطار العمل في أكثر من الشيفرة. وهذه هي النقاط التي تثيرها عادةً فرق الأمان والبنية التحتية وهندسة الأنظمة.
| المسألة | React كتطبيق صفحة واحدة | إطار Next.js |
|---|---|---|
| مراجعة الأمان | لا خادم خاص به، وتتحمل واجهة البرمجة كل المخاطر | توليد الصفحات وشيفرة الخادم يضيفان مساحة يجب مراجعتها وتحديثها بالإصلاحات |
| التحقق من الهوية | رموز الدخول تُدار في المتصفح، وتتحقق منها واجهة البرمجة | يمكن التحقق من الجلسات على الخادم قبل إرسال أي صفحة |
| البنية التحتية | يناسب أي استضافة ثابتة وبوابات واجهات البرمجة القائمة | يحتاج إلى بيئة تشغيل. تأكد أنها تناسب معاييرك في السحابة والحاويات والنشر |
| التخزين المؤقت | الملفات الثابتة تُخزَّن مؤقتاً على أطراف الشبكة | عدة طبقات تخزين يجب أن يفهمها الفريق، وإلا ظهرت صفحات قديمة |
| هيكل الفريق | فصل واضح بين فريقي الواجهة الأمامية والخلفية | يكتب مهندسو الواجهة الأمامية بعض شيفرة الخادم، فتتغير المسؤوليات |
| الاعتماد على مورّد | منخفض | يعمل حيثما يعمل Node.js. وبعض الميزات تعمل بأكبر سلاسة على منصات استضافة معينة، فاختبرها على منصتك |
لا يوجد خيار أكثر أماناً في المطلق. فتطبيق الصفحة الواحدة ينقل كل المسؤولية إلى واجهة البرمجة، وNext.js يضيف خادماً يجب تشغيله. لذلك اتخذ القرار مع من سيتولون التشغيل.
مثال تطبيقي
شركة واحدة وتطبيقان
شركة تأمين، افتراضية في هذا المثال، تبدأ مشروعين في الربع نفسه من السنة.
- أداة لمعالجة المطالباتيستخدمها الموظفون فقط، خلف تسجيل دخول الشركة، بشاشات مزدحمة وجلسات طويلة. وواجهة البرمجة موجودة أصلاً.
- القرارReact كتطبيق صفحة واحدة. فلا شيء يحتاج إلى الظهور في البحث أو التحميل الفوري لزوار لا يعرفون الشركة، والاستضافة الثابتة تناسب نموذج الأمان.
- موقع للعملاء فيه عروض أسعار وحسابات للوثائقصفحات منتجات عامة يجب أن تظهر في البحث، ومسار لعروض الأسعار يجب أن يُحمَّل بسرعة على الهواتف، وقسم لحملة الوثائق يتطلب تسجيل الدخول.
- القرارNext.js. تُقدَّم الصفحات العامة بصيغة HTML، ويُولَّد قسم الحساب للمستخدم المسجَّل، ويتشارك الاثنان مكتبة مكوّنات واحدة مع أداة المطالبات.
استخدم الفريق نفسه الخيارين، وتشارك نظام التصميم بينهما. وجاء القرار لكل تطبيق على حدة، بحسب من يستخدمه وكيف يصل إليه.
قائمة تحقق تساعدك على القرار
ضع علامة على ما ينطبق على تطبيقك. العلامات في البنود الأربعة الأولى تشير إلى Next.js، فإن لم تضع علامات إلا في الأربعة الأخيرة فالأقرب React وحده.
قائمة اختيار إطار العمل
0 من 8 منجزةماذا تفعل الآن
قرّر لكل تطبيق، لا للشركة كلها، وأشرك من سيتولى استضافته وتأمينه. وتشرح صفحة التطوير باستخدام Next.js وصفحة التطوير باستخدام React طريقة عملنا مع كل منهما، وتغطي صفحة لوحات البيانات للمؤسسات حالة التطبيقات التي تتطلب تسجيل الدخول.
وإن كنت تختار لمشروع محدد، أخبرنا من يستخدمه وكيف يصل إليه. وسنقول لك أيهما كنا سنختار، وما الذي كنا سنتحقق منه أولاً.
أسئلة شائعة
هل يحل Next.js محل React؟
لا. فإطار Next.js مبني على React ويحتاج إليه. الذي تغيّر أن توثيق React نفسه يوجّه المشاريع الجديدة الآن إلى استخدام إطار عمل، وNext.js من أكثر الأطر استخداماً. ويبقى تطبيق React دون إطار عمل خياراً سليماً للأدوات التي تعمل خلف تسجيل الدخول.
هل تستطيع محركات البحث فهرسة تطبيق صفحة واحدة مبني على React؟
يستطيع Google تشغيل JavaScript، لذلك يمكن فهرسة المحتوى في تطبيق الصفحة الواحدة. لكن المعالجة تجري في خطوة ثانية، وقد لا تشغّل محركات البحث الأخرى ومعاينات الشبكات الاجتماعية أي شيفرة أصلاً. وحين يهمك الظهور في البحث تجارياً، فإن تقديم المحتوى بصيغة HTML يزيل هذا الاعتماد.
هل نستطيع الانتقال من تطبيق React إلى Next.js لاحقاً؟
نعم، وتنتقل المكوّنات عادةً بتغييرات قليلة. أما العمل الحقيقي ففي توجيه الصفحات وجلب البيانات والتحقق من الهوية، إذ يتعامل معها إطار العمل بطريقة مختلفة. ويمكن الانتقال قسماً بعد قسم، وهو أسهل حين يكون التطبيق الأصلي قد أبقى الوصول إلى البيانات منفصلاً عن الواجهة.
هل يربطنا Next.js بشركة استضافة واحدة؟
إطار Next.js مفتوح المصدر، ويعمل على أي خادم Node.js، وفي الحاويات، وعلى عدة منصات سحابية. وبعض الميزات أيسر استخداماً على منصة الشركة التي تتولى صيانة الإطار. فإن كانت الاستقلالية مهمة لك، فحدّد وجهة الاستضافة من البداية، واختبر عليها الميزات التي تنوي استخدامها.
