ما هو توليد المواقع الساكنة (SSG)؟ وكيف يستغل Next.js هذه التقنية لبناء تطبيقات ويب ديناميكية
Aldawsari 
مقدمة: من المواقع الساكنة إلى التطبيقات الديناميكية
لطالما كانت المواقع الإلكترونية الساكنة جزءًا لا يتجزأ من شبكة الإنترنت منذ بداياتها. ومع التطور الهائل في لغة JavaScript، فُتحت آفاق جديدة لتحويل هذه المواقع الساكنة إلى تجارب أكثر ديناميكية وتفاعلية. فبينما يمكننا إنشاء ملفات HTML يدويًا، كيف يمكننا الاستفادة من تقنيات التوليد الساكن لبناء تطبيقات ويب حديثة باستخدام أدوات متطورة؟ هذا ما سنستكشفه في هذا المقال، مع التركيز على دور إطار العمل Next.js.
ما هو توليد المواقع الساكنة (Static Generation)؟
يصف مصطلح توليد المواقع الساكنة (Static Generation)، أو اختصارًا SSG (Static Site Generation)، العملية التي يتم من خلالها تجميع وعرض موقع ويب أو تطبيق بالكامل في وقت البناء (build time). والناتج النهائي لهذه العملية هو مجموعة من الملفات الساكنة، والتي تشمل ملف HTML نفسه، بالإضافة إلى الأصول الأخرى مثل ملفات JavaScript و CSS.
إذا لم تكن قد سمعت بمصطلح توليد المواقع الساكنة من قبل، ولكن يبدو لك المفهوم مألوفًا، فربما تكون قد عرفته باسمه الكامل Static Site Generation أو اختصاره الشائع SSG.
الفرق الجوهري: كيف يعمل توليد المواقع الساكنة؟
تطبيقات الويب التقليدية المبنية على JavaScript، كما نعرفها، تعمل عن طريق تشغيل مكتبات مثل React أو نصوص برمجية أخرى في وقت التشغيل (run time) داخل المتصفح. عندما يتلقى المتصفح الصفحة، تكون عادةً مجرد HTML بسيط بدون الكثير من المحتوى. ثم يقوم بتحميل النصوص البرمجية لسحب المحتوى إلى الصفحة، وهي عملية تُعرف أيضًا باسم “الترطيب” (hydration).
مع تقنية توليد المواقع الساكنة، تحاول أدوات مثل Next.js عرض هذه الصفحة بشكل مشابه لما ستكون عليه في المتصفح، ولكن في وقت التجميع (compile time). يمنحنا هذا القدرة على تقديم المحتوى الكامل للصفحة عند التحميل الأول. لا تزال النصوص البرمجية تقوم بترطيب الصفحة خلال هذه العملية، ولكن من الناحية المثالية، مع تغييرات أقل أو بدون تغييرات على الإطلاق، مما يوفر تجربة مستخدم أسرع وأكثر سلاسة.
كيف يستفيد Next.js من توليد المواقع الساكنة؟
بشكل افتراضي، يحاول Next.js توليد أي صفحات يمكنه توليدها بشكل ساكن. يقوم بذلك عن طريق اكتشاف كيفية جلب التطبيق لبياناته. يوفر Next.js العديد من واجهات برمجة التطبيقات (APIs) لجلب البيانات، بما في ذلك الدالتين getStaticProps و getServerSideProps. اعتمادًا على كيفية استخدام هاتين الدالتين، يحدد Next.js كيفية بناء تطبيقك:
- إذا كنت تستخدم
getStaticPropsفقط لجلب البيانات، فسيقومNext.jsبجلب تلك البيانات في وقت البناء، مما ينتج عنه صفحة ساكنة تمامًا. - إذا كنت تستخدم
getServerSideProps، فسيعرفNext.jsأن التطبيق يتطلب خادمًا لعرض تلك الصفحات. وبالتزامن مع حلول النشر مثلVercelالتي تتعامل تلقائيًا مع تهيئة الخادم، سيقومNext.jsبتحميل أي بيانات عند طلب المستخدم للصفحة من الخادم.
على الرغم من أنه لا يقوم بذلك افتراضيًا، يوفر Next.js أيضًا القدرة على تصدير التطبيق إلى ملفات ساكنة في دليل منفصل بعد بناء التطبيق. أولاً، ستقوم بتشغيل الأمر next build لبناء التطبيق، ثم تقوم بتشغيل next export الذي يجعل التطبيق متاحًا كملفات ساكنة في دليل out افتراضيًا.
خطوات عملية: بناء تطبيق Next.js ساكن
للحصول على فكرة عن كيفية عمل ذلك، يمكننا إنشاء تطبيق Next.js جديد بسرعة. المتطلبات الوحيدة لذلك هي أن يكون لديك Node مثبتًا مع npm، والقدرة على استخدام الطرفية (terminal) لتشغيل الأوامر.
إنشاء تطبيق Next.js جديد
البدء بسيط مثل تشغيل سطر واحد في الطرفية. افتح الدليل الذي ترغب في إنشاء مشروعك فيه وقم بتشغيل:
npx create-next-app my-static-nextjs-appبعد اكتمال التثبيت، يمكنك الانتقال إلى دليل مشروعك الجديد:
cd my-static-nextjs-appبمجرد الوصول إلى هناك، ابدأ خادم التطوير الخاص بك:
npm run devوبمجرد أن يصبح الخادم جاهزًا، يمكنك فتح http://localhost:3000 في متصفحك حيث يمكنك الآن رؤية تطبيق Next.js الجديد الخاص بك!
بناء تطبيق Next.js
الآن بعد أن أصبح تطبيقنا متاحًا، دعنا نحاول بناءه. في نفس الدليل، قم بتشغيل الأمر:
npm run buildإذا نظرت إلى المخرجات داخل الطرفية، فسنرى حدوث بعض الأمور المهمة. أولاً، يخبرنا Next.js أنه يمر بعملية البناء الخاصة به، بما في ذلك تحسين التطبيق للأداء، وتجميع التطبيق، وجمع البيانات.
بعد ذلك، نرى أن Next.js يعرض لنا تفصيلاً لكيفية بناء كل صفحة. يتضمن قالب Next.js الافتراضي للبدء بعض الصفحات الساكنة ومسار API مثال. باستخدام المفتاح في الأسفل، يمكننا أن نرى أن جميع الصفحات والأصول تم توليدها بشكل ساكن مع مسار واحد مصنف على أنه يتطلب خادمًا، والذي سيكون مسار API الخاص بنا.
ملاحظة: لأغراض هذا الشرح، يمكننا تجاهل مسار API، ولكن Next.js جنبًا إلى جنب مع Vercel يوفر القدرة على بناء دوال lambda functions كجزء من Next.js API.
تصدير تطبيق Next.js كملفات ساكنة
مع مخرجات بناء Next.js، نعلم أننا قمنا للتو ببناء بعض الصفحات الساكنة، ولكن قد نواجه صعوبة في العثور عليها. إذا نظرنا إلى المجلدات والملفات في مشروعنا، فليس من الواضح على الفور أين توجد هذه الملفات. عندما يقوم Next.js ببناء تطبيق، فإنه افتراضيًا يقوم فقط بإخراج هذا التطبيق داخل دليل .next. يتضمن هذا ملفات التكوين التي يمكن لأدوات مثل Vercel استخدامها وفهمها لنشر التطبيق. من الناحية الفنية، يتضمن هذا الدليل تطبيقنا بالكامل، ولكن هذا ليس شيئًا يمكننا نشره بسهولة على استضافة ساكنة.
يوفر Next.js أيضًا القدرة على تصدير التطبيق. سيأخذ هذا التطبيق الذي قمنا ببنائه وينتج مجموعة من الملفات الساكنة التي يمكننا بعد ذلك استخدامها لنشر تطبيقنا. داخل ملف package.json، قم بتحديث السكربت build ليشمل next export:
"build": "next build && next export"بمجرد التحديث، قم بتشغيل أمر البناء مرة أخرى في دليل المشروع:
npm run buildوالآن يمكننا أن نرى أننا لم نبنِ التطبيق فحسب كما فعلنا في خطوتنا الأخيرة، بل يخبرنا Next.js أننا نقوم أيضًا بتصدير التطبيق الذي بنيناه إلى ملفات ساكنة.
إذا نظرنا داخل مجلد مشروعنا، يجب أن نرى الآن دليلًا جديدًا يسمى out. إذا نظرنا داخل هذا المجلد، يمكننا الآن رؤية تطبيقنا بالكامل مجمعًا بشكل ساكن بما في ذلك ملف index.html بالإضافة إلى جميع ملفات CSS و JS اللازمة لاستخدام التطبيق!
الخلاصة التقنية
لقد تعلمنا كيف يمكننا استخدام Next.js ومفهوم توليد المواقع الساكنة (Static Generation) لتجميع تطبيق بشكل ساكن. يمكن لأدوات مثل Next.js القيام بذلك عن طريق تجميع الكود الخاص بنا، بشكل مشابه لما قد نراه في المتصفح، بحيث يكون تطبيقنا جاهزًا تمامًا للعمل بمجرد وصوله إلى المتصفح. بفضل أمر بسيط، يمكننا أيضًا بناء وتجميع تطبيقنا، بالإضافة إلى تصديره إلى ملفات ساكنة. يمكننا نشر هذه الملفات الساكنة على أي خدمة تخزين ساكنة مثل Vercel أو AWS S3. يوفر لنا هذا طريقة سهلة لإنشاء تطبيقات ويب ديناميكية تتسم بالسرعة والتكلفة المنخفضة، مما يمثل قفزة نوعية في عالم تطوير الويب الحديث. يُمكّن Next.js المطورين من تحقيق أفضل ما في العالمين: سرعة المواقع الساكنة ومرونة التطبيقات الديناميكية، مما يعزز تجربة المستخدم ويقلل من أعباء الخادم.
