javascript - 如何在 Next.js 应用程序中处理全局状态

Question

如果您查看下面的 GIF，您可以看到我的项目以及每次页面更改发生时auth,userData和拉入新数据的方式。notifications

我理解为什么会发生这种情况，正如您在我的_app.tsxuseEffect 中看到的那样：

useEffect(() => {
    let userDataUnsub;
    let notificationsUnsub;
    const unsub = auth.onIdTokenChanged(async (user) => {
      if (!user && !currentUser) {
        setAuth(null);
        nookies.set(undefined, "token", "", { path: "/" });
      } else {
        const token = await user.getIdToken();
        setAuth(user);
        toast("New AUTH");
        nookies.set(undefined, "token", token, { path: "/" });
        const docRef = doc(db, "users", user.uid);
        userDataUnsub = onSnapshot(docRef, (doc) => {
          toast("New USERDATA");
          setData(doc.data() as UserData);
        });
        const notificationsQuery = query(
          collection(db, "users", user.uid, "notifications"),
          orderBy("date", "desc"),
          limit(1)
        );
        notificationsUnsub = onSnapshot(notificationsQuery, (querySnapshot) => {
          querySnapshot.forEach((doc) => {
            addNotification(doc.data() as Notification);
            toast("New NOTIFICATION");
          });
        });
      }
    });
    return () => {
      unsub();
      try {
        userDataUnsub();
        notificationsUnsub();
      } catch {}
    };
  }, []);

由于我使用的是 Firebase，因此我想在userDataand上获得实时更新notifications，但是在我的 useEffect 中使用 onSnapshot 意味着它会在每次页面加载时执行此操作，这是我不想要的。我已经有了以前的状态，我不想重新下载它们。

有没有人有办法告诉 Next.js 等到客户端加载后再重新运行 useEffects ？（我知道一个菜鸟问题，但我不确定如何解决这个问题）