في أخر عشر سنوات على الأقل عصفت ثورات علمية عالم بناء مواقع الويب ، فبدأت تظهر مصطلحات و تقنيات و إطارات عمل و مكتبات جديدة تَحدث صخب و مناقشات و تعصب عند بعض المطورين .
فتجد بعضهم يتكلم و يكتب و يغرد في كل مكان عن مكتبة معينة لأنها تتبع معمارية أو فكرة الصفحة الواحدة و الأخر يؤيد فكرة الصفحات الثابتة - الاستاتيكية - و يتكلم عن كفاءتها وسرعتها بينما الثالث يتبنى فكرة السيرفرات لتوليد الصفحات و أخر يميل الى فكرة الـ JAM Stack و تسمع من يردد انتهى عصر الـ Web 2 و بدأ عصر الـ Web 3
فتجد عزيزي القارى ان الموضوع معقد ومتشعب جدا و تقنيات الويب لا تنتهي و لن تنتهي و لكن يبقى الحكم و الفاصل هـو فكرة و نوع المشروع الذي تريد إنشائه
في عالم الويب لا توجد طريقة مثلى أو خالية من التحديات و العقبات ، كما لا توجد معمارية واحدة يمكن تطبيقها و استخدامها لجميع الأفكار و المشاريع .
فلكل مشروع طريقة عمل تتناسب مع فكرة المشروع . ليس الهدف من هذه المقالة المقارنة و الانحياز الى مكتبة او اطار عمل معين إنما هي مقارنة علمية .
في هذا المقال سنسلط الضوء على أشهر ثلاث معماريات تستخدم في الوقت الحالي - حتى تاريخ كتابة المقال - لبناء المواقع و نقارنها من ناحية الأداء ، المرونة ، سرعة التطوير و كذلك الظهور في محركات البحث SEO.
سنتحدث عن
Single Page Application - SPA , Server Side Render - SSR And Static Site Generator - SSG
إستراتيجية البناء و طريقة العمل :
لكل واحدة طريقة عمل مميزة و معمارية مختلفة عن الأخرى ، فمثلاً SPA فكرة عملها إن يقوم المتصفح بإستلام صفحة الـ HTML واحدة فقط وتكون فارغة وجميع صفحات الموقع تعرض في هذه الصفحة و تتولى عملية بناء العناصر و تعبت المحتوى وتغيره وكل شي يخص الموقع ملف جافا سكربت ضخم لذلك- تلاحظ عملية تأخير في بداية عرض الموقع - initial load - لأن المتصفح ينتظر تنفيذ جميع أكواد الجافا سكربت الخاصة بالموقع وبعد ذلك يكون تصفح الموقع و التنقل بين صفحاته سريعة جدا ، لأنه تم تحميل كامل المحتوى مسبقا.
مميزاتها و عيوبها :
من ناحية الأداء لا تعتبر الأفضل لانه يتم تحميل كامل المحتوى قبل العرض وبالأخص إذا كان المحتوى ضخم و يحتوي على صور و ملفات فيبدأ يقل معيار الـ LCP - ولكن تعتبر جيدة من ناحية الـ TTI و أسرع من الـ SSR ، و ما يميزها سهولة التطوير وأيضا المرونة لأنها لا تحتاج الى أدوات خارجية و أيضا يمكن ربطها مع اي اطار عمل أو مكتبة أو لغة أخرى ولكن تعتبر الأضعف في الظهور في محركات البحث لأنها تعتمد بشكل كامل على الجافا سكربت .
معيار الـ LCP - هو اختصار Large Contentful Paint هو وحدة قياس الوقت لعرض الصور أو المحتوى النصي عند العرض المبدئي للصفحة - first load .
معيار الـ TTI - اختصار لـ Time To Interactive هــو وحدة قياس لمقدار الوقت لتكون الصفحة جاهزة للتفاعل و اخذ طلبات المستخدم .
من أشهر المكتبات و إطارات العمل اللي تتبع هذه المعمارية في الجافا سكربت :
React, Vue.js, AngularJS, Ember.js and Svelte
و على العكس تماما :
تعتمد فكرة الـ SSR على ارسال صفحات جاهزة من السيرفر الى المتصفح بإستخدام النماذج - Template Engine - توفر بعض إطارات العمل البيئة الجاهزة دون الحاجة الى استخدام النماذج NextJs على سبيل المثال - دون الحاجة الى الإنتظار لتحميل المحتوى ، ولذلك نجدها سريعة جداً في علمية عرض المحتوى لأن المتصفح يستلم صفحة عرض جاهزة .
مميزاتها و عيوبها
من ناحية الاداء تعتبر مقاربة لأداء الـ SSG بإستثناء وقت انتظار استجابة السيرفر ، التطوير صعب نوعا ما لأنها تعمل بشكل ديناميكي على السيرفر ولكنها مرنة جدا و تعتبر خيار ممتاز للبيانات الحساسة لأنها تعمل بشكل منفصل في السيرفر من عيوبها استهلاك السيرفر لانه في كل عملية طلب لعرض صفحة يتم ارسال الطلب الى السيرفر ولكنها ممتاز جدً لمحركات البحث ، و مقاربة لـ SSG .
من أشهر المكتبات و إطارات العمل اللي تتبع هذه المعمارية في الجافا سكربت :
Next.js, SvelteKit
بينما الـ SSG تعمل بنفس آلية الـ SSR
و عملية توليد الصفحات تتم في السيرفر و لكن تتم مرة واحدة فقط وهي عند عملية البناء -build time - و عند التشغيل - رفع الموقع - لا نحتاج الى السيرفر لأنه يتم تخزين جميع صفحات الـ HTML في CDN .
مميزاتها و عيوبها
الأفضل من ناحية الأداء لان الصفحات تكون موجودة مسبقاً ، محدودة من ناحية التخصيص و التفاعل و تحتاج الى عمل وادوات اضافية لتخصيص الصفحات ، وكذلك الى مفسر - compiler - قبل الرفع ، و لكنها تعتبر الأفضل لمحركات البحث لأنها تبنى صفحات HTML جاهزة للعرض وتكون الجافا سكربت خيار اضافي فيها .
أيهما أفضل ؟؟
لا توجد إجابة فاصلة لهذا السؤال ، فـكل مشروع له عوامل مختلفة مثل فريق العمل ، ميزانية العمل ، الفئة المستهدفة من المشروع … الخ
البعض يفضل بدمج معماريتن مثل الـ SSR مع SSG و هي ما تسمى بالـ hybrid architecture مثل فكرة عمل NextJs
فــتجد انها جميعها معماريات قوية في الأداء ، التطوير و المرونة ويبقى الحكم مثل ما قلت سابقا هو فكرة المشروع .
المصادر
Comparing SPA and SSG
What is the Difference Between SPAs, SSGs, and SSR
How nextJs works
modern architecture
A Brief history of the web
SSR VS CSR
TTI
LCP