Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

एक सीडीएन से बंडल फायरस्टोर सामग्री परोसें

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

कई एप्लिकेशन प्रथम पृष्ठ लोड होने पर सभी उपयोगकर्ताओं को समान सामग्री प्रदान करते हैं। उदाहरण के लिए कोई समाचार साइट नवीनतम समाचार दिखा सकती है, या कोई ई-कॉमर्स साइट सबसे अधिक बिकने वाले आइटम दिखा सकती है।

यदि यह सामग्री क्लाउड फायरस्टोर से पेश की जाती है, तो प्रत्येक उपयोगकर्ता उसी परिणाम के लिए एक नई क्वेरी जारी करेगा जब वे एप्लिकेशन लोड करेंगे। चूंकि इन परिणामों को उपयोगकर्ताओं के बीच कैश नहीं किया जाता है, इसलिए एप्लिकेशन धीमा और आवश्यकता से अधिक महंगा है।

समाधान: बंडल

क्लाउड फायरस्टोर बंडल आपको फायरबेस एडमिन एसडीके का उपयोग करके बैकएंड पर सामान्य क्वेरी परिणामों से डेटा बंडल इकट्ठा करने की अनुमति देता है, और सीडीएन पर कैश किए गए इन पूर्व-गणना वाले ब्लॉब्स की सेवा करता है। यह आपके उपयोगकर्ताओं को पहले लोड का बहुत तेज़ अनुभव देता है और आपकी Cloud Firestore क्वेरी लागत को कम करता है।

इस गाइड में हम बंडल बनाने के लिए क्लाउड फ़ंक्शंस का उपयोग करेंगे और फ़ायरबेस होस्टिंग को गतिशील रूप से कैश करने और बंडल सामग्री परोसने के लिए। गाइड में बंडलों के बारे में अधिक जानकारी उपलब्ध है।

50 नवीनतम "कहानियों" को क्वेरी करने के लिए पहले एक साधारण सार्वजनिक HTTP फ़ंक्शन बनाएं और परिणाम को एक बंडल के रूप में प्रस्तुत करें।

Node.js
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.json को संशोधित करके इस क्लाउड फ़ंक्शन को प्रदर्शित करने और कैश करने के लिए firebase.json होस्टिंग को कॉन्फ़िगर करें। इस कॉन्फ़िगरेशन के साथ फायरबेस होस्टिंग सीडीएन क्लाउड फ़ंक्शन द्वारा निर्धारित कैश सेटिंग्स के अनुसार बंडल सामग्री की सेवा करेगा। जब कैश समाप्त हो जाता है तो यह फ़ंक्शन को फिर से ट्रिगर करके सामग्री को रीफ्रेश करेगा।

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

अंत में अपने वेब एप्लिकेशन में, सीडीएन से बंडल की गई सामग्री प्राप्त करें और इसे फायरस्टोर एसडीके में लोड करें।

// 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 x 100,000 = 5,000,000 दस्तावेज़ पढ़ता है।

अब मान लें कि साइट ऊपर दी गई तकनीक को अपनाती है और उन 50 परिणामों को 5 मिनट तक कैश करती है। इसलिए प्रत्येक उपयोगकर्ता के लिए क्वेरी परिणाम लोड करने के बजाय, परिणाम प्रति घंटे ठीक 12 बार लोड किए जाते हैं। कोई फर्क नहीं पड़ता कि कितने उपयोगकर्ता साइट पर आते हैं, क्लाउड फायरस्टोर के लिए प्रश्नों की संख्या वही रहती है। 5,00,000 दस्तावेज़ पढ़ने के बजाय, यह पृष्ठ 12 x 24 x 50 = 14,400 दस्तावेज़ प्रति दिन पढ़ता है। फायरबेस होस्टिंग और क्लाउड फ़ंक्शंस के लिए छोटी अतिरिक्त लागतों को क्लाउड फायरस्टोर लागत बचत द्वारा आसानी से ऑफसेट किया जाता है।

जबकि डेवलपर को लागत बचत से लाभ होता है, सबसे बड़ा लाभार्थी उपयोगकर्ता होता है। इन 50 दस्तावेज़ों को सीधे क्लाउड फायरस्टोर के बजाय फायरबेस होस्टिंग सीडीएन से लोड करना पृष्ठ के सामग्री लोड समय से 100-200ms या अधिक आसानी से शेव कर सकता है। अध्ययनों ने बार-बार दिखाया है कि तेज़ पृष्ठों का अर्थ है खुश उपयोगकर्ता।