我目前正在开发一个可能成为SaaS应用程序的个人项目。该应用程序目前在前端使用firebase身份验证，使用nextJs 13+。我已经保护好了所有需要的组件。
问题是，我已经用go编写了我的后端，我只希望我的API端点可以被登录的用户访问。我知道有一个SDK可以通过向后端传递uid或token来检查用户是否经过身份验证。但是我的fetch在服务器组件上是异步的，当onAuthStateChanged被firebase更新时，nextjs已经从服务器获取了带有数据的HTML，这意味着当fetch被初始调用时，内部用户状态为null。
flow：layout.tsx component loads -> fetch in page.tsx -> loading state：true -> onAuthStateChanged（用户是授权的并且能够看到 Jmeter 板或被重新路由以登录）->加载状态：false ->显示初始加载时的 Jmeter 板。
还有其他方法可以让它工作，例如使用客户端组件。但我更愿意深入研究
示例代码布局：
export default function Layout({children}: {children: React.ReactNode}) {
const router = useRouter();
const [loading, setLoading] = useState(true);
const setUser = useAuthStore((state) => state.setUser);
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (data) => {
if (data === null) {
router.push('/');
return;
}
setLoading(false);
setUser({
email: data.email
});
});
return () => {
unsubscribe();
};
}, [loading]);
return (
<htmllang="en">
<body >
{loading ? (
<Loading/>
) : (
<>{children}</>
)}
</body>
</html>
);
}page.tsx:
async function DashBoard() {
const data = await getExternalAPI(); // call fetch function
const user = useAuthStore.getState().user;
console.log(user);
return (<div></div>)
}
1条答案
按热度按时间mi7gmzs61#
Next.js中的延迟加载通过减少呈现路由所需的JavaScript量来帮助提高应用程序的初始加载性能。它允许您延迟客户端组件和导入库的加载，并且仅在需要时将它们包含在客户端包中。