ما وراء الجسر: احتراف React Server Components في Expo

لسنوات، عشنا نحن العاملون في بيئة React Native فصلاً واضحاً، وغالباً ما كان مؤلماً، بين المهام. كان هناك الـ backend الخاص بك (Node, Go, Python) والـ frontend لتطبيقات الجوال، يربط بينهما جسر هش من استدعاءات REST أو GraphQL، وإدارة حالة (state management) معقدة، وشلال الـ useEffect الذي لا مفر منه.

لكن مؤخراً، كنت أختبر الإصدارات الأخيرة من Expo Router و React Server Components (RSC). ويمكنني القول بكل ثقة: لقد تغيرت قواعد اللعبة. لم نعد نبني واجهات مستخدم للجوال فحسب؛ بل أصبحنا نبني تطبيقات universal و full-stack حيث تصبح الحدود بين العميل (client) والخادم (server) مجرد تفصيل تقني بدلاً من أن تكون عقبة معمارية.

لحظة الإدراك (The "Aha!" Moment)

عندما رأيت RSCs لأول مرة في Next.js، كنت متشككاً. فكرت: "لماذا نعيد المنطق (logic) إلى الخادم؟". لكن بعد ذلك، حاولت تنفيذ لوحة بيانات (dashboard) غنية بالبيانات في تطبيق Expo. تقليدياً، كنت سأحتاج إلى حالة تحميل (loading state)، و hook من نوع useQuery وشاشة انتظار (skeleton screen)، وطريقة لمعالجة تحويل البيانات على جانب العميل.

مع تطبيق Expo لـ RSC، جاءت لحظة الإدراك عندما اكتشفت أنه يمكنني جلب البيانات مباشرة في المكون الخاص بي، باستخدام async/await المعياري، وإبقاء منطق الأعمال الثقيل — ومفاتيح الـ API — بعيداً تماماً عن جهاز المستخدم.

نقل المنطق إلى الخادم

في تطبيق Expo القياسي، كل مكتبة تستوردها تزيد من حجم الـ JavaScript bundle الخاص بك. في الجوال، حيث تكون ظروف الشبكة غير متوقعة، حجم الـ bundle يعني الأداء. تتيح لنا RSCs عرض المكونات على الخادم وإرسال وصف خفيف للواجهة إلى العميل.

إليك نمطاً كنت أستخدمه لشاشة ملف شخصي آمنة ومعتمدة على البيانات:

// ProfileScreen.server.tsx
import { Text, View } from 'react-native';
import { db } from './database';

export default async function ProfileScreen({ userId }) {
  // Direct database access! No public API endpoint needed.
  const user = await db.users.findUnique({ where: { id: userId } });

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>{user.name}</Text>
      <Text>{user.bio}</Text>
      {/* This component is rendered on the server and sent as a payload */}
    </View>
  );
}

الربط مع العميل باستخدام 'use client'

بالطبع، تطبيق الجوال بدون تفاعلية هو مجرد مستند. السحر يحدث عندما تدمج Server Components مع Client Components. لقد وجدت أن أفضل معمارية هي استخدام Server Components لجلب البيانات والتنسيق (layout)، و Client Components لكل ما يتطلب حالة (state) أو إيماءات (gestures).

// FollowButton.tsx
'use client';

import { useState } from 'react';
import { Button } from 'react-native';

export function FollowButton() {
  const [following, setFollowing] = useState(false);

  return (
    <Button 
      title={following ? "Unfollow" : "Follow"} 
      onPress={() => setFollowing(!following)} 
    />
  );
}

من خلال تمييز هذا بـ 'use client'، يعرف Expo أنه يجب تضمين هذا في الـ JS bundle المرسل إلى الجهاز، بينما يظل المكون الأب ProfileScreen على الخادم.

لماذا يهم هذا مطوري الـ Native؟

1. الأمان افتراضياً: لم يعد علي القلق بشأن الكشف عن واجهات API داخلية حساسة. يتحدث مكون الخادم مع قاعدة البيانات، ولا يرى الجهاز سوى بنية الواجهة النهائية.
2. منطق برمجى بحجم صفر bundle: إذا استخدمت مكتبة ضخمة لتنسيق التاريخ أو محللاً معقداً لـ markdown على الخادم، فإن هذا الكود لا يصل أبداً إلى جهاز الجوال. يحصل مستخدمي على تطبيق أسرع.
3. حالة مبسطة: لاحظت انخفاضاً كبيراً في الأكواد المتكررة (boilerplate) الخاصة بـ Redux أو Zustand. إذا تولى الخادم حالة البيانات الأولية، فلن أحتاج إلى الحالة على جانب العميل إلا للتفاعلات الفعلية مع الواجهة.

التحديات (وكيفية التعامل معها)

الأمر ليس سهلاً تماماً. التغيير في النموذج الذهني (mental model) حقيقي. لا يمكنك تمرير الدوال كـ props من Server Component إلى Client Component لأن الدوال غير قابلة للتسلسل (not serializable). عليك التفكير من حيث "الفتحات" (slots) أو البيانات الأولية (data primitives).

أيضاً، يتطلب تصحيح الأخطاء (debugging) نهجاً مختلفاً. أنت الآن تنظر إلى سجلات الخادم (server logs) جنباً إلى جنب مع React Native debugger. أوصي بشدة باستخدام أداة تسجيل (logging) قوية لتتبع الطلبات عبر الحدود.

خاتمة

احتراف RSC في Expo لا يقتصر فقط على تعلم API جديد؛ بل يتعلق بتبني طريقة أكثر شمولية للتفكير في تطبيقاتنا. نحن ندخل عصراً لا تعني فيه كلمة "Universal" مجرد ويب + جوال، بل عميل + خادم كوحدة واحدة متكاملة.

إذا لم تجرب دعم RSC التجريبي في Expo Router بعد، فقد حان الوقت. إنه مستقبل كيفية بناء تطبيقات native عالية الأداء.

ابقَ فضولياً، واستمر في البرمجة.