De nombreuses applications diffusent le même contenu à tous les utilisateurs lors du premier chargement de la page. Par exemple, un site d'actualités peut afficher les derniers articles, ou un site de commerce électronique peut afficher les articles les plus vendus.
Si ce contenu est diffusé à partir de Cloud Firestore, chaque utilisateur émettra une nouvelle requête pour les mêmes résultats lorsqu'il chargera l'application. Étant donné que ces résultats ne sont pas mis en cache entre les utilisateurs, l'application est plus lente et plus coûteuse que nécessaire.
Solution : bundles
Cloud Firestore bundles vous permettent d'assembler des bundles de données à partir de résultats de requêtes courants sur le backend à l'aide du SDK Firebase Admin, et de diffuser ces objets blob précalculés mis en cache sur un CDN. Vos utilisateurs bénéficient ainsi d'une expérience de premier chargement beaucoup plus rapide, et vous réduisez vos Cloud Firestore coûts de requête.
Dans ce guide, nous allons utiliser Cloud Functions pour générer des bundles et Firebase Hosting pour mettre en cache et diffuser dynamiquement le contenu des bundles. Pour en savoir plus sur les bundles, consultez les guides.
Commencez par créer une fonction HTTP publique simple pour interroger les 50 dernières "stories" et diffuser le résultat sous forme de bundle.
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); });
Java
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())); } }
Configurez ensuite Firebase Hosting pour diffuser et mettre en cache cette Cloud Function en modifiant firebase.json. Avec cette configuration, le Firebase Hosting CDN
diffusera le contenu du bundle en fonction des paramètres de cache définis par la
Cloud Function. Lorsque le cache expirera, il actualisera le contenu en déclenchant à nouveau la fonction.
firebase.json
{
"hosting": {
// ...
"rewrites": [{
"source": "/createBundle",
"function": "createBundle"
}]
},
// ...
}
Enfin, dans votre application Web, récupérez le contenu groupé à partir du CDN et chargez-le dans le 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
// ...
}
Estimation des économies
Prenons l'exemple d'un site d'actualités qui reçoit 100 000 utilisateurs par jour et où chaque utilisateur charge les 50 principales actualités lors du chargement initial. Sans mise en cache, cela entraînerait 50 x 100 000 = 5 000 000 de lectures de documents par jour à partir de Cloud Firestore.
Supposons maintenant que le site adopte la technique ci-dessus et mette en cache ces 50 résultats pendant cinq minutes maximum. Ainsi, au lieu de charger les résultats de la requête pour chaque utilisateur, les résultats sont chargés exactement 12 fois par heure. Quel que soit le nombre d'utilisateurs qui accèdent au site, le nombre de requêtes adressées à Cloud Firestore reste le même. Au lieu de 5 000 000 de lectures de documents, cette page utiliserait 12 x 24 x 50 = 14 400 lectures de documents par jour. Les petits coûts supplémentaires liés à Firebase Hosting et à Cloud Functions sont facilement compensés par les Cloud Firestore économies réalisées sur les coûts.
Bien que le développeur bénéficie des économies réalisées, l'utilisateur est le principal bénéficiaire. Le chargement de ces 50 documents à partir du CDN Firebase Hosting plutôt que directement à partir de Cloud Firestore peut facilement réduire le temps de chargement du contenu de la page de 100 à 200 ms ou plus. Des études ont montré à plusieurs reprises que les pages rapides rendent les utilisateurs plus satisfaits.