Next.js中Firebase Authentication验证用户加载过慢，如何优化？

问题背景 #

使用React+Firebase Authentication，通过全局上下文管理登录状态，上下文的useEffect代码如下：

useEffect(() => {
    const unsubscribeAuth = firebase.auth.onAuthStateChanged(handleUser);
    const unsubscribeToken = firebase.auth.onIdTokenChanged(handleUser);
    return () => {
        unsubscribeAuth();
        unsubscribeToken();
    };
}, []);

实现的<ProtectedRoute/>组件在用户已登录时，加载受保护路由需要约5秒才渲染内容，未登录时仅需0.5秒，推测是Firebase验证保存令牌的过程耗时过长。组件代码：

function ProtectedRoute({ children }: Props) {
    const router = useRouter();
  
    const auth = useAuth();

    if (auth.loading) { // 加载状态耗时约5秒！
        return ( <Spinner/>)
    }
    if (auth.user) {
        // 验证通过 -> 渲染子组件
        return children;
    } else {
        // 重定向到登录页
        router.push("/sign-in");
        return null;
    }
}

优化方案 #

1. 移除重复的监听事件 #

同时订阅onAuthStateChanged和onIdTokenChanged会触发重复的handleUser调用，导致状态更新混乱、延长加载时间。实际上onAuthStateChanged已经会覆盖用户登录状态变化（包括令牌刷新）的场景，无需单独订阅onIdTokenChanged，保留一个监听即可：

useEffect(() => {
    const unsubscribe = firebase.auth.onAuthStateChanged(handleUser);
    return unsubscribe;
}, []);

2. 优化handleUser的状态更新逻辑 #

确保只有当用户状态确实变化时才更新上下文状态，避免频繁触发重渲染，同时及时结束加载状态：

const handleUser = (user) => {
    if (user !== auth.user) {
        setAuth({
            user: user,
            loading: false
        });
    } else {
        setAuth(prev => ({ ...prev, loading: false }));
    }
};

3. 提前初始化Firebase Auth #

在应用入口文件（如index.js或App.js）中提前完成Firebase初始化，不要等到上下文组件挂载后才初始化，避免初始化延迟拖慢状态获取速度。

4. 优先读取本地缓存用户 #

Firebase Auth会在本地缓存用户会话，可在上下文初始化时先读取缓存，快速结束加载状态，后续再通过监听同步最新状态：

useEffect(() => {
    // 先读取本地缓存的用户
    const cachedUser = firebase.auth.currentUser;
    if (cachedUser) {
        setAuth({ user: cachedUser, loading: false });
    }
    // 再订阅状态变化监听
    const unsubscribe = firebase.auth.onAuthStateChanged(handleUser);
    return unsubscribe;
}, []);

5. 排查网络与配置问题 #

• 检查用户网络环境，确认Firebase Auth的验证请求未被代理或防火墙拦截
• 确认Firebase项目的区域配置靠近用户所在地区，减少网络延迟

6. 优化加载状态的用户体验 #

避免长时间显示Spinner，可设置最大等待时长（如1秒）后切换为骨架屏，降低用户对加载延迟的感知。

内容的提问来源于stack exchange，提问作者kingkong.js