المدونة

React use() وSuspense: بثّ البيانات بدون شلالات

ست بطاقات على لوحة التحكم، ست مؤشرات تحميل، ولا تظهر معاً — تظهر واحدة تلو الأخرى كالدومينو، لأن كل بطاقة بدأت التحميل فقط بعد انتهاء التي فوقها. هذا هو الشلال، والوقت الإجمالي للانتظار ليس أبطأ طلب بل مجموع الكل. use() وSuspense يقطعان هذه السلسلة — لكن المثير للاهتمام هو الآلية الداخلية: ماذا يرمي المكوّن المُعلَّق فعلاً، وكيف يصل HTML الذي يصل بترتيب خاطئ إلى مكانه الصحيح.

View Transitions وNext.js: حركات الصفحات بدون مكتبة

لعشر سنوات، كان تحريك الصور المصغّرة إلى صور البطل يعني تقنية واحدة: قِس العنصر قبل وبعد، وزيّف الفرق بـtransform، ثم اعرضه. FLIP. كل مكتبة حركات تفعل ذلك، وكل منها تدفع ثمنه بـJavaScript على الخيط الرئيسي في أسوأ لحظة ممكنة. View Transitions API ينقل الحيلة بأكملها إلى المتصفح — ومنذ React 19.2 وNext.js 16، يتكون العقد بأكمله من خاصية واحدة اسمها name.

Server Actions في Next.js: نموذج يعمل قبل أن تُحمَّل جافاسكريبت

تبدو „use server” وكأنها سكّر نحوي (syntactic sugar) فوق طلب fetch إلى مسار API – ولهذا بالضبط تتعامل معظم التطبيقات معها كأنها استدعاء دالة عادي. هذا خطأ له عواقب ملموسة: كلّ دالة موسومة بـ„use server” تصبح نقطة نهاية عامة على الشبكة، والنموذج المبني على هذه الآلية يعمل حتى قبل أن تتاح فرصة لجافاسكريبت أن تُحمَّل. أفحص ما يجري فعليًا خلف هذا التوجيه، وأين تكمن الفخاخ التي لا تظهر في التوثيق من النظرة الأولى.

إنشاء مكونات متاحة لقارئات الشاشة

HTML الصحيح ليس سوى نقطة البداية. اكتشف كيف تعمل شجرة إتاحة الوصول فعليًا، ولماذا تضر ARIA أكثر مما تنفع في أحيان كثيرة، وابنِ معي أكورديون حقيقيًا، ومنطقة حية (live region)، وإدارة تركيز في Next.js.