Используйте Firebase в динамических веб-приложениях с SSR (серверный рендеринг), используйте Firebase в динамических веб-приложениях с SSR (серверный рендеринг)

Если вы работали с Firebase JS SDK или другими клиентскими SDK Firebase, вы, вероятно, знакомы с интерфейсом FirebaseApp и тем, как его использовать для настройки экземпляров приложений. Для упрощения аналогичных операций на стороне сервера Firebase предоставляет FirebaseServerApp .

FirebaseServerApp — это вариант FirebaseApp для использования в средах рендеринга на стороне сервера (SSR). Он включает инструменты для продолжения сеансов Firebase, которые охватывают разделение рендеринга на стороне клиента (CSR) и рендеринга на стороне сервера. Эти инструменты и стратегии могут помочь улучшить динамические веб-приложения, созданные с помощью Firebase и развернутые в средах Google, таких как Firebase App Hosting .

Используйте FirebaseServerApp для:

  • Выполнять серверный код в контексте пользователя , в отличие от Firebase Admin SDK, который имеет полные права администрирования.
  • Включить использование проверки приложений в средах SSR.
  • Продолжить сеанс аутентификации Firebase, созданный в клиенте.

Жизненный цикл FirebaseServerApp

Фреймворки рендеринга на стороне сервера (SSR) и другие среды выполнения, не являющиеся браузерами, такие как облачные рабочие процессы, оптимизируют время инициализации путем повторного использования ресурсов в нескольких выполнениях. FirebaseServerApp разработан для адаптации к этим средам с помощью механизма подсчета ссылок. Если приложение вызывает initializeServerApp с теми же параметрами, что и предыдущий initializeServerApp , оно получает тот же экземпляр FirebaseServerApp , который уже был инициализирован. Это сокращает ненужные накладные расходы на инициализацию и выделение памяти. Когда deleteApp вызывается для экземпляра FirebaseServerApp , он уменьшает количество ссылок, и экземпляр освобождается после того, как количество ссылок достигает нуля.

Очистка экземпляров FirebaseServerApp

Может быть сложно определить, когда вызывать deleteApp для экземпляра FirebaseServerApp , особенно если вы параллельно запускаете много асинхронных операций. Поле releaseOnDeref FirebaseServerAppSettings помогает упростить это. Если вы назначаете releaseOnDeref ссылку на объект с продолжительностью жизни области запроса (например, объект заголовков запроса SSR), FirebaseServerApp уменьшит количество ссылок, когда фреймворк вернет объект заголовка. Это автоматически очистит ваш экземпляр FirebaseServerApp .

Вот пример использования releaseOnDeref :

/// Next.js
import { headers } from 'next/headers'
import { FirebaseServerAppSettings, initializeServerApp} from "@firebase/app";

export default async function Page() {
  const headersObj = await headers();
  appSettings.releaseOnDeref = headersObj;
  let appSettings: FirebaseServerAppSettings = {};
  const serverApp = initializeServerApp(firebaseConfig, appSettings);
  ...
}

Возобновить аутентифицированные сеансы, созданные на клиенте

Когда экземпляр FirebaseServerApp инициализируется с помощью токена Auth ID, он позволяет связать сеансы аутентифицированных пользователей между средами клиентского рендеринга (CSR) и серверного рендеринга (SSR). Экземпляры Firebase Auth SDK, инициализированные с помощью объекта FirebaseServerApp , содержащего токен Auth ID, попытаются выполнить вход пользователя при инициализации без необходимости вызова каких-либо методов входа со стороны приложения.

Предоставление токена Auth ID позволяет приложениям использовать любые методы входа Auth на клиенте, гарантируя, что сеанс продолжится на стороне сервера, даже для тех методов входа, которые требуют взаимодействия с пользователем. Кроме того, это позволяет выгружать интенсивные операции на сервер, такие как аутентифицированные запросы Firestore, что должно улучшить производительность рендеринга вашего приложения.

/// Next.js
import { initializeServerApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// Replace the following with your app's
// Firebase project configuration
const firebaseConfig = {
  // ...
};

const firebaseServerAppSettings = {
  authIdToken: token  // See "Pass client tokens to the server side
                      // rendering phase" for an example on how transmit
                      // the token from the client and the server.
}

const serverApp =
  initializeServerApp(firebaseConfig,
                      firebaseServerAppSettings);
const serverAuth = getAuth(serverApp);

// FirebaseServerApp and Auth will now attempt
// to sign in the current user based on provided
// authIdToken.

Используйте App Check в средах SSR

Принудительное применение App Check опирается на экземпляр App Check SDK, который Firebase SDK используют для внутреннего вызова getToken . Полученный токен затем включается в запросы ко всем службам Firebase, позволяя бэкэнду проверять приложение.

Однако, поскольку для доступа к определенным эвристикам проверки приложений App Check SDK необходим браузер, его невозможно инициализировать в серверных средах.

FirebaseServerApp предоставляет альтернативу. Если сгенерированный клиентом токен App Check предоставляется во время инициализации FirebaseServerApp , он будет использоваться SDK продукта Firebase при вызове служб Firebase, что устраняет необходимость в экземпляре App Check SDK.

/// Next.js
import { initializeServerApp } from "firebase/app";

// Replace the following with your app's
// Firebase project configuration
const firebaseConfig = {
  // ...
};

const firebaseServerAppSettings = {
  appCheckToken: token // See "Pass client tokens to the server side
                       // rendering phase" for an example on how transmit
                       // the token from the client and the server.
}

const serverApp =
  initializeServerApp(firebaseConfig,
                      firebaseServerAppSettings);

// The App Check token will now be appended to all Firebase service requests.

Передача клиентских токенов на этап рендеринга на стороне сервера

Для передачи аутентифицированных токенов Auth ID (и токенов App Check) от клиента на фазу рендеринга на стороне сервера (SSR) используйте service worker. Этот подход включает перехват запросов на выборку, которые запускают SSR, и добавление токенов к заголовкам запросов.

См. Управление сеансами с помощью сервис-воркеров для эталонной реализации сервис-воркера Firebase Auth. Также см. Изменения на стороне сервера для кода, демонстрирующего, как анализировать эти токены из заголовков для использования в инициализации FirebaseServerApp .