if you view the GIF below you can see my project and how the auth, userData and notifications pulls in new data every time a page change happens.

I understand why this is happening, as you can see in my _app.tsx useEffect:

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 {}
    };
  }, []);

Since i am using Firebase, I want to get live updates on userData and notifications, however using an onSnapshot in my useEffect means it will do this on every page load, which I dont want. I already have the state from before, I dont want to redownload them.

Does anybody have a way of telling Next.js to wait until the client is loaded before rerunning useEffects again? (bit of a noob question I know, but im unsure of how to tackle this)