Birçok uygulama, ilk sayfa yüklendiğinde tüm kullanıcılara aynı içeriği sunar. Örneğin, bir haber sitesi en son haberleri, bir e-ticaret sitesi ise en çok satan ürünleri gösterebilir.
Bu içerik Cloud Firestore'ten yayınlanırsa her kullanıcı, uygulamayı yüklediğinde aynı sonuçlar için yeni bir sorgu gönderir. Bu sonuçlar kullanıcılar arasında önbelleğe alınmadığından uygulama olması gerekenden daha yavaş ve daha pahalıdır.
Çözüm: Paketler
Cloud Firestore paketleri, Firebase Admin SDK'sını kullanarak arka uçtaki ortak sorgu sonuçlarından veri paketleri oluşturmanıza ve bu önceden hesaplanmış blob'ları bir CDN'de önbelleğe alarak yayınlamanıza olanak tanır. Bu sayede kullanıcılarınıza çok daha hızlı bir ilk yükleme deneyimi sunabilir ve Cloud Firestore sorgu maliyetlerinizi düşürebilirsiniz.
Bu kılavuzda, paket oluşturmak için Cloud Functions ve paket içeriğini dinamik olarak önbelleğe almak ve yayınlamak için Firebase Hosting kullanacağız. Paketler hakkında daha fazla bilgiyi kılavuzlarda bulabilirsiniz.
Öncelikle, en son 50 "hikayeyi" sorgulamak ve sonucu paket olarak yayınlamak için basit bir herkese açık HTTP işlevi oluşturun.
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()));
}
}
Ardından, firebase.json değerini değiştirerek Firebase Hosting'i bu Cloud Function'ı yayınlayıp önbelleğe alacak şekilde yapılandırın. Bu yapılandırmayla Firebase Hosting CDN, paket içeriğini Cloud Functions tarafından ayarlanan önbellek ayarlarına göre sunar. Önbelleğin süresi dolduğunda işlevi tekrar tetikleyerek içeriği yeniler.
firebase.json
{
"hosting": {
// ...
"rewrites": [{
"source": "/createBundle",
"function": "createBundle"
}]
},
// ...
}
Son olarak, web uygulamanızda paketlenmiş içeriği CDN'den alın ve Firestore SDK'sına yükleyin.
// 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
// ...
}
Tahmini Tasarruf Miktarı
Günde 100.000 kullanıcı alan ve her kullanıcının ilk yüklemede aynı 50 popüler haberi yüklediği bir haber web sitesini düşünün. Önbelleğe alma olmadan bu işlem, Cloud Firestore'ten günde 50 x 100.000 = 5.000.000 belge okumayla sonuçlanır.
Şimdi sitenin yukarıdaki tekniği benimsediğini ve bu 50 sonucu 5 dakikaya kadar önbelleğe aldığını varsayalım. Bu nedenle, sorgu sonuçları her kullanıcı için yüklenmek yerine saatte tam 12 kez yüklenir. Siteye kaç kullanıcı gelirse gelsin Cloud Firestore'a yapılan sorgu sayısı aynı kalır. Bu sayfa, 5.000.000 doküman okuması yerine günde 12 x 24 x 50 = 14.400 doküman okuması kullanır. Firebase Hosting ve Cloud Functions için ödenmesi gereken küçük ek maliyetler, Cloud Firestore maliyet tasarruflarıyla kolayca telafi edilebilir.
Geliştirici maliyet tasarruflarından yararlansa da en büyük faydayı kullanıcı elde eder. Bu 50 dokümanı doğrudan Cloud Firestore yerine Firebase Hosting CDN'den yüklemek, sayfanın içerik yükleme süresinden kolayca 100-200 ms veya daha fazla zaman kazanılmasını sağlayabilir. Çalışmalar, hızlı sayfaların kullanıcıların memnuniyetini artırdığını defalarca göstermiştir.