si ve el GIF a continuación, puede ver mi proyecto y cómo la auth , los datos de userData y notifications obtienen nuevos datos cada vez que ocurre un cambio de página.

Entiendo por qué sucede esto, como puede ver en mi _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 {} }; }, []);

Dado que estoy usando Firebase, quiero obtener actualizaciones en vivo sobre los datos de userData y notifications , sin embargo, usar un onSnapshot en mi useEffect significa que hará esto en cada carga de página, lo cual no quiero. Ya tengo el estado de antes, no quiero volver a descargarlos.

¿Alguien tiene alguna forma de decirle a Next.js que espere hasta que se cargue el cliente antes de volver a ejecutar useEffects nuevamente? (una pregunta un poco novata, lo sé, pero no estoy seguro de cómo abordar esto)