react-ssr-starter — قالب بداية لتصيير React من الخادم

قالب بداية (boilerplate) لا تطبيق نهائي — غرضه توفير اليوم الأول من أي مشروع React يحتاج تصييراً من الخادم.

نظرة عامة

react-ssr-starter قالب بداية يجمع القطع التي يحتاجها أي تطبيق React يُصَيَّر على الخادم: خادم Express، وتجميع بـ webpack للمتصفح وللخادم، ومخزن Redux يُرطّب في العميل، وتهيئة React Router، وتنسيق بـ Tailwind CSS.

ملف README في المستودع لا يزال نصّ Create React App الافتراضي ولا يصف طبقة التصيير من الخادم. ما ورد هنا مبني على وصف المستودع ومواضيعه المعلنة، والصفحة مقصودة الاختصار لذلك.

المشكلة

تطبيق React المعتاد يرسل صفحة فارغة ثم يملأها بعد تحميل الحزمة. وينتج عن ذلك أمران:

• محتوى غائب عن الزواحف. محركات البحث ومعاينات الروابط في الشبكات الاجتماعية ترى هيكلاً فارغاً.
• فراغ أول رسمة. المستخدم ينتظر دورة شبكية كاملة قبل أن يرى شيئاً.

الحلّ معروف — التصيير على الخادم — لكن تركيبه من الصفر في كل مرة يستهلك يوماً أو يومين قبل كتابة أي ميزة حقيقية.

التخطيط

القالب يجمع أربع قطع يُعاد تركيبها في كل مشروع SSR:

القطعة	الدور
Express	استقبال الطلب وإعادة HTML مُصَيَّراً
webpack	حزمتا بناء منفصلتان: للمتصفح وللخادم
Redux	حالة تُبنى على الخادم ثم تُسلّم إلى العميل
React Router	تعريف مسارات يقرأه الطرفان

القرارات المعمارية

إعداد webpack صريح بدل أداة مغلقة. أدوات البداية الجاهزة تخفي التجميع خلف أمر واحد، وهذا مريح حتى تحتاج حزمة ثانية موجّهة إلى Node — وعندها لا مفرّ من فتح الإعداد. القالب يبدأ من إعداد مكشوف ليوفّر هذه المواجهة.

حالة واحدة تعبر من الخادم إلى العميل. تصيير الصفحة على الخادم دون تمرير الحالة التي بُنيت عليها يعني أن يعيد العميل طلب البيانات نفسها فوراً، وربّما يرسم محتوى مختلفاً في اللحظة الأولى. لذا يُنقل مخزن Redux مع الصفحة ويُرطّب منه.

Tailwind CSS ضمن القالب لا خارجه. إضافة طبقة التنسيق لاحقاً إلى بناء مزدوج (متصفح + خادم) تعني تعديل مساري بناء؛ دمجها منذ البداية يجعل القالب صالحاً للاستخدام فوراً.

النتيجة والدروس

المخرج نقطة انطلاق قابلة للنسخ: مشروع يُصَيَّر من الخادم ويُرطّب في المتصفح دون إعادة تركيب البنية التحتية في كل مرة.

1. SSR قرار بناء قبل أن يكون قرار واجهة. أكثر التعقيد يقع في طبقة التجميع والتشغيل، لا في مكوّنات React نفسها.
2. قالب البداية يُقاس بتوثيقه. هذا المستودع مثال على العكس: الشيفرة تتجاوز ما يصفه README، فيضيع أكثر ما يميّزه على من يمرّ عليه.

الروابط

• المستودع: github.com/i99dev/react-ssr-starter