6 أسباب قد تدفعك لاختيار Nuxt لتنفيذ مشروعك القادم

الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،

تحدثت في (مقال سابق) عن بعض مزايا نوكست (Nuxt) وأسباب انتقالي إليها، وفي هذا المقال سأتحدث - بمزيد من التفصيل - عن أهم نقاط القوة التي تميزها .. كالتالى:

1- دعم استدعاء الصفحات من الخادم (Server-side render)

مؤكد أنك صادفت هذا السيناريو من قبل عندما تقوم بتنفيذ موقع رائع، وكل شئ يسير على ما يرام إلى أن يقول لك العميل (الموقع لا يظهر على محركات البحث !).

والسبب في ذلك أن أدوات برمجة الواجهات التي تتبع منهجية الصفحة الواحدة (SPA - Single page Application) تقوم بتشغيل الصفحات على المتصفح فقط وليس على الخادم، بالتالى يصعب على محركات البحث فهرسة الموقع لأنها لا تجد أي بيانات في مصدر الصفحة، فقط <div> فارغ، وحزمة من أكواد "جافا سكريبت" بداخلها المحتوى.

بالتالي إن كنت تهتم بميزة التكامل مع محركات البحث، يجب عليك اتباع الطريقة القديمة بأن يقوم (الخادم / السيرفر) بتكوين الصفحة كاملة ثم إرسالها للمستعرض.

الجميل في "نوكست" أنها تقوم بعمل ذلك بشكل تلقائي دون أي تدخل منك، حيث تقوم بإنشاء الصفحات بشكل كامل قبل إرسالها للمستعرض، وبالتالي يصبح موقعك صديقا لمحركات البحث.

ولعلك هنا قد تتساءل "أليس بناء الصفحات على الخادم قد يجعل تحميل الصفحات أكثر بُطئاً ؟ ألم يكن الهدف الرئيسي من منهجية الصفحة الواحدة (SPA) هو تسريع التنقل بين الصفحات ؟" وهذا بالتأكيد سؤال جيد.

في الطريقة القديمة يتم إرسال الصفحة كاملة من الخادم، حتى الأجزاء الثابتة والمكررة مثل المُكونات أعلى وأسفل الصفحة (Header & Footer)، في كل مرة يتم فيها ارسال الصفحة للمستعرض.

لكن مع نوكست الأمر مختلف حيث في المرة الأولى يتم استدعاء الصفحة كاملة، وعند التنقل بين باقى الصفحات يعمل التطبيق بنفس منهجية الصفحة الواحدة (SPA)، حيث يستدعي فقط الأجزاء التي يحتاجها لتكوين الصفحة، بالتالي تحصل على المزايا الخاصة بكلا الأسلوبين معا في نفس الوقت.

2- التوجيه المبنى على الملفات (File-based routing)

إذا كنت تعاملت من قبل مع التوجيه (routing) في أدوات مثل أنجلير (Angular) أو فيو (Vue)، ستجد أنك تحتاج أن تنشئ ملف في المشروع، يكون مسئولا عن تحديد كل مسار مع (المُكوّن / الصفحة) المقابلة له، بحيث يكون من السهل التنقل بين صفحات التطبيق.

في "نوكست" لا تحتاج أن تنشئ هذا الملف، حيث يتم بشكل تلقائي تعريف مسار جديد بناء على كل صفحة تضيفها في مجلد الصفحات Pages في التطبيق.

فمثلا لو أضفت ملف جديد اسمه index داخل مجلد الصفحات، سيتم تعريف هذا الملف بشكل تلقائي على أنه الصفحة الرئيسية للتطبيق، ولو أضفت مثلا ملف باسم about ثم كتبت عنوان الموقع متبوعا بabout/ سيتم الانتقال تلقائيا لصفحة about في التطبيق.

3- التعرف التلقائي على الملفات (Auto-imports)

كمثال للتوضيح، إن كنت تستخدم فيو (Vue) ستقوم بكتابة الكود بالشكل التالي

<script setup lang="ts">
import { ref,  computed } from 'vue'; // This line not required in Nuxt
const count = ref(1);
const double = computed(() => count.value * 2);
</script>

تأمل السطر الثاني في المثال السابق، حيث تحتاج لكتابة هذا السطر حتى يتعرف التطبيق على الأوامر التي تستدعيها ref و computed من "فيو".

لكن مع "نوكست" الأمر أبسط بكثير حيث لا تضطر لكتابة هذا السطر أو غيره عند استدعاء الأوامر مثل computed و reactive و ref وغيرهم، وأيضا نقاط التحقق أثناء تحميل المُكونات (Components lifecycle hooks) مثل onMounted و onBeforeUnmounte وغيرها، وأيضا أي ملفات جديدة تُنشئها في التطبيق داخل المجلدات components و composables و utils.

مؤكد هذه الميزة ستوفر عليك الكثير من الوقت الذي تضيعه في إدراج الملفات (Import) اللازمة لتشغيل المكتبات التي تستدعيها في الصفحة، وأيضا عند إزالة هذه السطور إذا لم تعد في حاجة لاستخدامها.

4- جلب البيانات (Data fetching)

إن طريقة جلب البيانات في "نوكست" تعتبر من الأمور الثورية في المجال، فعلى سبيل المثال - لا الحصر

• يمكنك استدعاء البيانات والربط بسهولة مع نقاط الإتصال (APIs - Access Point Interfaces) سواء من المستعرض أو من الخادم.
• يمكنك عمل تخزين مؤقت (Caching) للبيانات التي تم استدعائها بحيث لا تحتاج للاتصال بالخادم فى كل مرة تحتاج فيها لعرض نفس البيانات.
• يوجد أكثر من أداة مثل useFetch و useAsyncData وغيرهم، لتلائم حالات الاستخدام المختلفة بناء على احتياج التطبيق.
• إمكانية معرفة حالة الطلب (Request) سواء لعرض النتائج أو عرض مؤشر تحميل (loading) أو معرفة الأخطاء ومعالجتها فى حالة فشل الإتصال.
• تم مراعاة طريقة الكود البرمجي بحيث يكون بسيط ومنظم (Clean code) وبحيث يحقق الهدف المطلوب بأقل عدد من الأوامر.

5- الوحدات التكميلية (Modules)

الوحدات التكميلية في "نوكست" عبارة عن مكتبات برمجية يمكن تنصيبها بسهولة، لتضيف خصائص ووظائف تكميلية للتطبيق وتوفر عليك الوقت والجهد اللازم لبناء هذه الوظائف من الصفر.

ولعل ما يميز "نوكست" في هذا الجانب هو وجود مجتمع كبير من المبرمجين الداعمين والمنتجين لهذه الوحدات التكميلية.

هل تحتاج لإضافة خطوط جديدة أو أيقونات احترافية ؟ هل تريد استخدام مكوّنات واجهة جاهزة لتسريع تصميم الواجهات مثل فيوتفاي (Vuetify) أو برايم فيو (Prime vue) أو تيلويند (Tailwind) وغيرهم الكثير ؟ هل تريد التكامل مع منصة سحابية (Cloud) مثل سوبا بيز (Supabase) أو الربط مع قاعدة بيانات مثل مونجو دى بى (MongoDB) ؟

جميع الوظائف السابقة وغيرها الكثير يمكنك اضافتها واستخدامها بسهولة مع الوحدات التكميلية في "نوكست".

6- أدوات المبرمج (DevTools)

إنطلاقا من دعم "نوكست" لتجربة استخدام أفضل للمبرمجين، كانت الحاجة لتقديم هذه الأداة القوية التي تتيح للمبرمج معرفة العديد من التقارير والإحصائيات لجميع أجزاء ومكونات التطبيق.

يمكنك أن تجد حصر شامل لجميع الصفحات (Pages) والمكوّنات (Components) والوحدات التكميلية (Modules)، بالإضافة لمعرفة مدى الترابط والتكامل فيما بينهم.

يمكنك أيضا مشاهدة تقرير مفصل لكل صفحة في التطبيق لمعرفة مدى ملاءمتها لمعايير محركات البحث (SEO)، مع تقديم شكل تخيليى (Preview) لشكل روابط الصفحات إذا قمت بمشاركتها على مواقع السوشيال مثل (فيسبوك وتويتر).

يمكنك عمل فحص (Inspect) لأي من العناصر الموجودة في الشاشة، وعند الضغط عليه يتم بشكل تلقائي فتح الكود البرمجي الخاص بهذه الجزئية في برنامج تحرير الأكواد (VSCode).

أيضا يمكنك البحث عن الوحدات التكميلية (Modules) وتنصيبها بكل سهولة بضغطة زر واحدة من الماوس.

ولعل أكثر المزايا التي انبهرت بها شخصيا هي إمكانية إنشاء وحذف وتعديل المخططات (Schema) والجداول (Collections) الخاصة بقواعد البيانات، دون الحاجة لكتابة سطر كود واحد.

وأخيرا في ختام هذا المقال أتمني أن أكون قد وفقت في طرح أهم مزايا هذه الأداة القوية، وقريبا - بإذن الله - سأقوم بنشر المزيد من المقالات والشروحات الأكثر تفصيلا لشرح مزيد من الجوانب العملية.

وفقنى الله وإياك إلى ما يحبه ويرضاه .. ودمت سالما ،،