问题：例如，在NextJS13中，您的导航栏位于根layout.tsx文件夹中。它检查auth，然后获取用户，你希望用户对所有页面都是全局可用的，无论是服务器组件还是客户端组件，因为Navbar存在于每个路由中，本质上是auth会话的真实来源，当Navbar已经完成工作时，在所有服务器组件上获取用户是不明智的。
xxslljrj1#
解决方案：https://www.youtube.com/watch?v=OpMAH2hzKi8使用Zustand，一个不需要上下文 Package 器的全局状态管理系统：https://www.npmjs.com/package/zustand创建商店
const useUserStore = create((set) => ({ signedIn: false, setSignedIn: (isSignedIn) => set({ isSignedIn }), }))
创建StoreInitializer.tsx：
"use client"; import { useRef } from "react"; import { useUserStore } from "@/store/userStore"; export function StoreInitializer({ user }: { user?: User }) { const isInitialized = useRef(false); if (!isInitialized.current) { useUserStore.setState({ user, }); isInitialized.current = true; } return null; }
在根布局中
const { user } = await useServerGetAuth(); // ur own auth function useUserStore.setState({ user: user }); return ( <html lang="en"> <body > <NextTopLoader /> <StoreInitializer user={user} /> <Navbar /> {children} <Footer /> </body> </html> );
现在，只要布局成功地在服务器端验证了用户，它就会设置用户。这也将防止默认值 Flink 。
1条答案
按热度按时间xxslljrj1#
解决方案：https://www.youtube.com/watch?v=OpMAH2hzKi8
使用Zustand，一个不需要上下文 Package 器的全局状态管理系统：https://www.npmjs.com/package/zustand
创建商店
创建StoreInitializer.tsx：
在根布局中
现在，只要布局成功地在服务器端验证了用户，它就会设置用户。这也将防止默认值 Flink 。