悬念回退在NextJS 13中没有显示

Question

我正在构建一个应用程序来展示悬念在Nextjs 13中的用法。但是在加载时没有显示悬念。

这是page.js

import React, { Suspense } from "react";
import Loading from "./loading";
const Trending = React.lazy(() => import("./Trending"));
function Page() {
return (
<div>
<Suspense fallback={<Loading />}>
<Trending />
</Suspense>
</div>
);
}
export default Page;

这是趋势

import axios from "axios";
export default async function Trending() {
const res = await axios.get(
`https://api.themoviedb.org/3/trending/movie/day?api_key=1428e09fe38be9df57355a8d6198d916`
);
const data = res.data;
// Add a delay to ensure that the Suspense fallback is shown
await new Promise((resolve) => setTimeout(resolve, 3000));
return (
<div>
<li>{data.results[0].title}</li>
</div>
);
}

如果您还需要什么就告诉我。

我尝试了各种方法，如延迟加载，添加延迟和所有，但仍然不工作。我需要看到在加载数据时显示回退组件。

Answer 1

因为你正在使用NextJS，你应该使用他们自己的API来延迟加载组件。你可以在他们的文档中找到。

你的组件看起来像这样:

// ..imports..
import dynamic from 'next/dynamic'
const Trending = dynamic(() => import('./Trending'), {
ssr: false,
})

NextJS首先在服务器端呈现组件，然后在客户端呈现组件，因此它会发出2个相同的请求。

要避免这种行为，你需要设置ssr选项，这就是为什么:

ssr:假

然后在jsx:

// ..jsx..
<Suspense fallback={<Loading />}>
<Trending />
</Suspense>
// ..jsx..

Answer 2

也许你应该抛出一个承诺，以使悬念生效。正如Nicholas Tower在这个链接上所说的。React悬念未按预期工作