عرض محتوى Firestore مجمّع من شبكة توصيل محتوى

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

إذا تم عرض هذا المحتوى من Cloud Firestore، سيُجري كل مستخدم طلب بحث جديدًا للحصول على النتائج نفسها عند تحميل التطبيق. ولأنّه لا يتم تخزين هذه النتائج مؤقتًا بين المستخدمين، يكون التطبيق أبطأ وأكثر تكلفة مما يجب.

الحلّ: الحِزم

Cloud Firestore تتيح لك حِزم البيانات تجميع حِزم البيانات من نتائج طلبات البحث المشترَكة في الخلفية باستخدام حزمة Firebase Admin SDK، وعرض هذه المجموعات المجمّعة المحفوظة مؤقتًا في ذاكرة التخزين المؤقت على شبكة توصيل المحتوى (CDN). يوفّر ذلك للمستخدمين تجربة تحميل أولى أسرع بكثير ويقلل من تكاليف طلبات البحث في Cloud Firestore.

في هذا الدليل، سنستخدم Cloud Functions لإنشاء الحِزم و Firebase Hosting لتخزين محتوى الحِزم مؤقتًا وتقديمه ديناميكيًا. يمكنك الاطّلاع على المزيد من المعلومات عن الحِزم في الأدلة.

أنشئ أولاً دالة HTTP عامة بسيطة لطلب أحدث 50 "قصة" و عرض النتيجة كحزمة.

exports.createBundle = functions.https.onRequest(async (request, response) => {
  // Query the 50 latest stories
  const latestStories = await db.collection('stories')
    .orderBy('timestamp', 'desc')
    .limit(50)
    .get();

  // Build the bundle from the query results
  const bundleBuffer = db.bundle('latest-stories')
    .add('latest-stories-query', latestStories)
    .build();

  // Cache the response for up to 5 minutes;
  // see https://firebase.google.com/docs/hosting/manage-cache
  response.set('Cache-Control', 'public, max-age=300, s-maxage=600');

  response.end(bundleBuffer);
});
      

package com.example;

import com.google.auth.oauth2.GoogleCredentials;
import com.google.cloud.firestore.Firestore;
import com.google.cloud.firestore.FirestoreBundle;
import com.google.cloud.firestore.Query.Direction;
import com.google.cloud.firestore.QuerySnapshot;
import com.google.cloud.functions.HttpFunction;
import com.google.cloud.functions.HttpRequest;
import com.google.cloud.functions.HttpResponse;
import com.google.firebase.FirebaseApp;
import com.google.firebase.FirebaseOptions;
import com.google.firebase.cloud.FirestoreClient;
import java.io.BufferedWriter;
import java.io.IOException;

public class ExampleFunction implements HttpFunction {

  public static FirebaseApp initializeFirebase() throws IOException {
    if (FirebaseApp.getApps().isEmpty()) {
      FirebaseOptions options = FirebaseOptions.builder()
          .setCredentials(GoogleCredentials.getApplicationDefault())
          .setProjectId("YOUR-PROJECT-ID")
          .build();

      FirebaseApp.initializeApp(options);
    }

    return FirebaseApp.getInstance();
  }

  @Override
  public void service(HttpRequest request, HttpResponse response) throws Exception {
    // Get a Firestore instance
    FirebaseApp app = initializeFirebase();
    Firestore db = FirestoreClient.getFirestore(app);

    // Query the 50 latest stories
    QuerySnapshot latestStories = db.collection("stories")
        .orderBy("timestamp", Direction.DESCENDING)
        .limit(50)
        .get()
        .get();

    // Build the bundle from the query results
    FirestoreBundle bundle = db.bundleBuilder("latest-stores")
        .add("latest-stories-query", latestStories)
        .build();

    // Cache the response for up to 5 minutes
    // see https://firebase.google.com/docs/hosting/manage-cache
    response.appendHeader("Cache-Control", "public, max-age=300, s-maxage=600");

    // Write the bundle to the HTTP response
    BufferedWriter writer = response.getWriter();
    writer.write(new String(bundle.toByteBuffer().array()));
  }
}
      

بعد ذلك، عليك ضبط "استضافة Firebase" لعرض ووضع وظائف Cloud هذه في ذاكرة التخزين المؤقت من خلال تعديل firebase.json. باستخدام هذه الإعدادات، ستعرض شبكة توصيل المحتوى (CDN) في Firebase Hosting محتوى الحزمة وفقًا لإعدادات ذاكرة التخزين المؤقت التي ضبطتها Cloud Function. عند انتهاء صلاحية ذاكرة التخزين المؤقت، ستتم إعادة تحميل المحتوى من خلال بدء الدالة مرة أخرى.

firebase.json
{
  "hosting": {
    // ...
    "rewrites": [{
      "source": "/createBundle",
      "function": "createBundle"
    }]
  },
  // ...
}

أخيرًا، في تطبيق الويب، يمكنك جلب المحتوى المجمّع من شبكة CDN وتحميله إلى حزمة تطوير البرامج (SDK) لمنصّة Firestore.

// If you are using module bundlers.
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/firestore/bundle" // This line enables bundle loading as a side effect.

async function fetchFromBundle() {
  // Fetch the bundle from Firebase Hosting, if the CDN cache is hit the 'X-Cache'
  // response header will be set to 'HIT'
  const resp = await fetch('/createBundle');

  // Load the bundle contents into the Firestore SDK
  await db.loadBundle(resp.body);

  // Query the results from the cache
  // Note: omitting "source: cache" will query the Firestore backend.
  
  const query = await db.namedQuery('latest-stories-query');
  const storiesSnap = await query.get({ source: 'cache' });

  // Use the results
  // ...
}

نسبة التوفير المقدّرة

لنفترض أنّ هناك موقعًا إلكترونيًا إخباريًا يجذب 100,000 مستخدم في اليوم، ويحمّل كل مستخدم أهم 50 قصة في الصفحة الرئيسية عند التحميل الأولي. بدون أي تخزين مؤقت، سيؤدي ذلك إلى قراءة 50 × 100,000 = 5,000,000 مستند في اليوم من Cloud Firestore.

لنفترض الآن أنّ الموقع الإلكتروني يتّبع التقنية أعلاه ويخزّن هذه النتائج الـ 50 في ذاكرة التخزين المؤقت مدّةً تصل إلى 5 دقائق. لذا، بدلاً من تحميل نتائج طلبات البحث لكل مستخدم، يتم تحميل النتائج 12 مرة في الساعة بالضبط. بغض النظر عن عدد المستخدمين الذين يصلون إلى الموقع، يظل عدد طلبات البحث إلى Cloud Firestore كما هو. بدلاً من قراءة 5,000,000 مستند، ستستخدم هذه الصفحة 12 x ‏24 x ‏50 = 14,400 قراءة مستند في اليوم. ويمكن تعويض التكاليف الإضافية الصغيرة لـ "استضافة Firebase" وCloud Functions بسهولة من خلال توفير التكاليف بقيمة Cloud Firestore.

في حين يستفيد المطوّر من التوفير في التكلفة، يستفيد المستخدم أكثر من غيره. يمكن أن يؤدي تحميل هذه المستندات الخمسين من شبكة توصيل المحتوى (CDN) في Firebase Hosting بدلاً من تحميلها من Cloud Firestore مباشرةً إلى تقليل وقت تحميل محتوى الصفحة بسهولة من 100 إلى 200 ملي ثانية أو أكثر. أظهرت الدراسات بشكل متكرّر أنّ الصفحات السريعة تؤدي إلى سعادة المستخدمين.