Firebase Admin SDK在Next.js的getServerSideProps中超时问题排查

我希望使用Next.js自带的SEO功能，此前暂采用客户端渲染视频信息。现打算改用服务端渲染（主要为了使用OpenGraph协议），但本地通过npm run dev运行时，getServerSideProps函数每次加载耗时超20秒，部署到Vercel时无服务器函数出现超时情况。怀疑是Firebase Admin SDK每次加载时初始化耗时过长，想请教是否有遗漏的优化操作能提升速度？

现有代码 #

firebaseAdmin.ts #

import admin from "firebase-admin";

if (!admin.apps.length) {
    admin.initializeApp({
        projectId: 'PROJECT_ID',
        credential: admin.credential.cert({
            projectId: process.env.FIREBASE_PROJECT_ID,
            privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n'),
            clientEmail: process.env.FIREBASE_CLIENT_EMAIL
          }),
    });
}


export {admin};

videoPage.tsx #

import {admin} from './firebaseAdmin.ts'

export const getServerSideProps: GetServerSideProps = async (ctx) => {
    const {video} = ctx.params;
    const snapshot = await admin.firestore(app).doc('/videos/'+video).get();
    const data = snapshot.data();
    if (data.private) return { props: {} };
    return {
        props: {
            title: data.title,
            image: data.images[0].image
        }
    }
}

优化方案 #

1. 修复Firestore调用错误 #

当前videoPage.tsx里的admin.firestore(app)是错误写法，firestore()方法无需传入app参数（除非多实例场景），正确写法为admin.firestore()。这个错误会引发无效调用或异常处理，直接拖慢请求速度。

2. 稳固Admin实例复用逻辑 #

你的初始化逻辑（检查apps.length避免重复初始化）方向正确，但Next.js开发模式下热重载会导致模块重复加载，可通过全局变量复用实例：

// firebaseAdmin.ts
import admin from "firebase-admin";

declare global {
  var firebaseAdmin: admin.app.App | undefined;
}

let app: admin.app.App;

if (process.env.NODE_ENV === "production") {
  app = admin.initializeApp({
    credential: admin.credential.cert({
      projectId: process.env.FIREBASE_PROJECT_ID,
      privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, "\n"),
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
    }),
  });
} else {
  // 开发环境用全局变量保存实例，避免热重载重复初始化
  if (!global.firebaseAdmin) {
    global.firebaseAdmin = admin.initializeApp({
      credential: admin.credential.cert({
        projectId: process.env.FIREBASE_PROJECT_ID,
        privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, "\n"),
        clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
      }),
    });
  }
  app = global.firebaseAdmin;
}

const firestore = app.firestore();
export { admin, firestore };

3. 优化Firestore查询性能 #

• 仅获取所需字段，减少数据传输：

// 只拉取title、images、private三个字段
const snapshot = await firestore.doc(`/videos/${video}`).get({
  fields: ['title', 'images', 'private']
});

• 确保videos集合的文档查询路径正确，单文档查询无需额外索引，但如果后续有过滤逻辑需提前配置索引。

4. Vercel部署额外优化 #

• 检查环境变量配置：FIREBASE_PRIVATE_KEY在Vercel中可能无需手动replace换行符，可测试移除该逻辑。
• 改用增量静态生成（ISR）：如果视频内容不是实时更新，ISR能兼顾静态页面速度与SEO需求，比getServerSideProps性能提升显著：

// videoPage.tsx 改用ISR
export const getStaticProps: GetStaticProps = async (ctx) => {
  const { video } = ctx.params as { video: string };
  const snapshot = await firestore.doc(`/videos/${video}`).get({
    fields: ['title', 'images', 'private']
  });
  const data = snapshot.data();
  
  if (!data || data.private) {
    return { notFound: true };
  }

  return {
    props: {
      title: data.title,
      image: data.images[0].image,
    },
    revalidate: 60, // 每60秒重新验证并更新内容
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  // 视频数量多时，用fallback: 'blocking'按需生成页面
  return {
    paths: [], // 可提前配置热门视频路径
    fallback: 'blocking',
  };
};

5. 本地调试定位耗时点 #

用console.time精准定位慢环节：

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  console.time('admin-init');
  const { firestore } = await import('./firebaseAdmin');
  console.timeEnd('admin-init');

  console.time('firestore-query');
  const { video } = ctx.params as { video: string };
  const snapshot = await firestore.doc(`/videos/${video}`).get();
  console.timeEnd('firestore-query');

  // 后续逻辑...
};

内容的提问来源于stack exchange，提问作者jycksyn