我有以下问题：当我尝试使用App router在Next中获取一些数据服务器端时，我面临着一个无休止的挂起加载。我认为这一定与数据获取有关，因为当我删除该部分时，组件正确加载。我在这里做错了什么吗？
这是我的服务器端组件：
import Button from "@/components/Button";
interface EmailResetPreviewData {
existingEmail: string;
newEmail: string;
}
const getEmailResetPreview = async (emailResetId: string) => {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_BASE_URL}/auth/reset/email/preview/${emailResetId}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
const data: EmailResetPreviewData = await response.json();
return data;
};
const ResetEmail = async ({
params,
}: {
params: {
emailResetId: string;
};
}) => {
const { emailResetId } = params;
const data = await getEmailResetPreview(emailResetId);
return (
<div>
<h1>Confirm Your New Email</h1>
<p>
Your current email is <strong>{data.existingEmail}</strong>.
</p>
<p>
Your new email will be <strong>{data.newEmail}</strong>.
</p>
<Button>Change Email</Button>
</div>
);
};
export default ResetEmail;字符串
ResetEmail组件在以下布局中呈现：
<html lang="en">
<Suspense fallback={<Loading containerSize={150} barWidth={5} />}>
<AuthProvider>
<body className={`${comfortaa.className} ${styles.RootLayout}`}>
<NavigationBar visible={navbBarVisible} />
<div className={styles.pageContent}>{children}</div>
<Footer />
</body>
</AuthProvider>
</Suspense>
</html>型
1条答案
按热度按时间h9a6wy2h1#
我很确定“无休止的挂起加载”与你的API调用没有正确解析有关。你检查了控制台与这个请求相关的信息吗？
除此之外，似乎你试图在你的整个布局（包括你的html的主体）上使用Suspense。尽管这在某些情况下可能有效，但这不是Next打算让你使用Suspense的方式。
如果你想在任何请求仍在加载时显示你的Loading组件，Next 13引入了特殊文件loading.js（Typescript上的.ts或.tsx）。在内部，Next将使用Suspense Package 布局上的子元素，将加载文件内容呈现为后备。
那么，Next希望我们什么时候手动使用Suspense？当您不想在请求加载时停止渲染整个页面，而只是页面的一部分受此影响时。在这种情况下，您可以通过仅将包含请求的可扩展组件 Package 在Suspense组件中来定义自己的Suspense边界，这意味着只有该组件将被替换为回退，直到它完成加载。这就是Next所说的Streaming。
有关此问题的更多信息，请参阅文档：https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming