Многие приложения показывают один и тот же контент всем пользователям при первой загрузке страницы. Например, на новостном сайте могут показываться последние новости, а на сайте электронной торговли – самые продаваемые товары.
Если этот контент размещен в Cloud Firestore, то при загрузке приложения каждый пользователь будет отправлять новый запрос для получения одних и тех же результатов. Поскольку эти результаты не кешируются между пользователями, приложение работает медленнее и обходится дороже, чем могло бы.
Решение: наборы
Пакеты Cloud Firestore позволяют собирать пакеты данных из результатов распространенных запросов на сервере с помощью Firebase Admin SDK и передавать эти предварительно вычисленные большие двоичные объекты, кэшированные в CDN. Это значительно ускоряет первую загрузку и снижает затраты на запросы к Cloud Firestore.
В этом руководстве мы будем использовать Cloud Functions для создания пакетов и Firebase Hosting для динамического кеширования и показа контента пакетов. Дополнительную информацию о пакетах можно найти в руководствах.
Сначала создайте простую общедоступную функцию HTTP, которая будет запрашивать 50 последних историй и возвращать результат в виде пакета.
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())); } }
Затем настройте Firebase Hosting для обслуживания и кеширования этой функции Cloud Functions, изменив firebase.json. При такой конфигурации CDN Firebase Hosting будет предоставлять контент пакета в соответствии с настройками кеша, заданными функцией Cloud Functions. Когда срок действия кеша истечет, контент будет обновлен путем повторного запуска функции.
firebase.json
{
"hosting": {
// ...
"rewrites": [{
"source": "/createBundle",
"function": "createBundle"
}]
},
// ...
}
Наконец, в веб-приложении получите объединенный контент из CDN и загрузите его в Firestore SDK.
// 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 операций чтения документов в день из Cloud Firestore.
Теперь предположим, что сайт использует описанный выше метод и кэширует эти 50 результатов на срок до 5 минут. Таким образом, вместо того чтобы загружать результаты запроса для каждого пользователя, они загружаются ровно 12 раз в час. Независимо от того, сколько пользователей заходит на сайт, количество запросов к Cloud Firestore остается неизменным. Вместо 5 000 000 операций чтения документов на этой странице будет выполняться 12 x 24 x 50 = 14 400 операций чтения документов в день. Небольшие дополнительные расходы на Firebase Hosting и Cloud Functions легко компенсируются экономией на Cloud Firestore.
Хотя разработчик получает выгоду от экономии средств, больше всего выигрывает пользователь. Загрузка этих 50 документов из CDN Firebase Hosting, а не напрямую из Cloud Firestore, может легко сократить время загрузки контента страницы на 100–200 мс или более. Исследования неоднократно показывали, что пользователи предпочитают быстро загружающиеся страницы.