التصيير الثابت والديناميكي

في الفصل السابق، قمت بجلب البيانات لصفحة نظرة عامة على لوحة التحكم. ومع ذلك، ناقشنا بإيجاز قيدين في الإعداد الحالي:

1. طلبات البيانات تخلق شلالًا غير مقصود.
2. لوحة التحكم ثابتة، لذا أي تحديثات للبيانات لن تنعكس على تطبيقك.

ما هو التصيير الثابت؟

مع التصيير الثابت، يتم جلب البيانات والتصيير على الخادم في وقت البناء (عند النشر) أو عند إعادة التحقق من صحة البيانات.

عندما يزور المستخدم تطبيقك، يتم تقديم النتيجة المخزنة مسبقًا. هناك بعض الفوائد للتصيير الثابت:

• مواقع أسرع - يمكن تخزين المحتوى المقدم مسبقًا وتوزيعه عالميًا عند النشر على منصات مثل Vercel. وهذا يضمن أن المستخدمين حول العالم يمكنهم الوصول إلى محتوى موقعك بشكل أسرع وأكثر موثوقية.
• تقليل حمل الخادم - لأن المحتوى مخزن مؤقتًا، لا يحتاج خادمك إلى إنشاء المحتوى ديناميكيًا لكل طلب مستخدم. هذا يمكن أن يقلل من تكاليف الحوسبة.
• تحسين محركات البحث (SEO) - من الأسهل لمحركات البحث فهرسة المحتوى المقدم مسبقًا، حيث يكون المحتوى متاحًا بالفعل عند تحميل الصفحة. هذا يمكن أن يؤدي إلى تحسين ترتيب محركات البحث.

التصيير الثابت مفيد لواجهة المستخدم بدون بيانات أو البيانات المشتركة بين المستخدمين، مثل مقالة مدونة ثابتة أو صفحة منتج. قد لا يكون مناسبًا للوحة تحكم تحتوي على بيانات مخصصة يتم تحديثها بانتظام.

عكس التصيير الثابت هو التصيير الديناميكي.

ما هو التصيير الديناميكي؟

مع التصيير الديناميكي، يتم تصيير المحتوى على الخادم لكل مستخدم في وقت الطلب (عند زيارة المستخدم للصفحة). هناك بعض الفوائد للتصيير الديناميكي:

• بيانات في الوقت الفعلي - يسمح التصيير الديناميكي لتطبيقك بعرض بيانات في الوقت الفعلي أو يتم تحديثها بشكل متكرر. هذا مثالي للتطبيقات التي تتغير بياناتها كثيرًا.
• محتوى مخصص للمستخدم - من الأسهل تقديم محتوى مخصص، مثل لوحات التحكم أو ملفات المستخدمين، وتحديث البيانات بناءً على تفاعل المستخدم.
• معلومات وقت الطلب - يسمح التصيير الديناميكي بالوصول إلى المعلومات التي يمكن معرفتها فقط في وقت الطلب، مثل ملفات تعريف الارتباط (cookies) أو معلمات البحث في URL.

محاكاة جلب بيانات بطيء

تطبيق لوحة التحكم الذي نقوم ببنائه ديناميكي.

ومع ذلك، لا يزال هناك مشكلة واحدة تم ذكرها في الفصل السابق. ماذا يحدث إذا كان أحد طلبات البيانات أبطأ من جميع الطلبات الأخرى؟

دعونا نحاكي جلب بيانات بطيء. في app/lib/data.ts، قم بإلغاء تعليق console.log و setTimeout داخل fetchRevenue():

export async function fetchRevenue() {
  try {
    // نؤخر الرد بشكل مصطنع لأغراض العرض التوضيحي.
    // لا تفعل هذا في الإنتاج :)
    console.log('Fetching revenue data...');
    await new Promise((resolve) => setTimeout(resolve, 3000));
 
    const data = await sql<Revenue[]>`SELECT * FROM revenue`;
 
    console.log('Data fetch completed after 3 seconds.');
 
    return data;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch revenue data.');
  }
}

الآن افتح http://localhost:3000/dashboard/ في علامة تبويب جديدة ولاحظ كيف تستغرق الصفحة وقتًا أطول للتحميل. في طرفيتك، يجب أن ترى أيضًا الرسائل التالية:

Fetching revenue data...
Data fetch completed after 3 seconds.

هنا، قمت بإضافة تأخير مصطنع لمدة 3 ثوان لمحاكاة جلب بيانات بطيء. النتيجة هي أن صفحتك بالكامل محظورة من عرض واجهة المستخدم للزائر أثناء جلب البيانات. مما يقودنا إلى تحدي شائع يتعين على المطورين حله:

مع التصيير الديناميكي، يكون تطبيقك سريعًا فقط مثل أبطأ جلب بيانات لديك.