NextJS 13 中的 Suspense 回退未显示。

Question

我正在构建一个应用程序，以展示在Nextjs 13中使用Suspense的用法。但是，在加载时，Suspense回退没有显示。

这是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>
  );
}

如果您需要其他任何帮助，请告诉我。

我尝试了各种方法，如懒加载、添加延迟等，但仍然无法正常工作。我需要在加载数据时看到备用组件显示。

- Suraj Vishwakarma

---

你找到这个问题的解决办法了吗？ - Rodolfo Gonçalves

Answer 1

由于您正在使用NextJS，因此应使用它们自己的API来延迟加载组件。 您可以在他们的文档中找到。

对于您的组件，代码如下：

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

NextJS 先在服务器端渲染组件，然后在客户端上进行渲染，因此会发出两个相同的请求。

为了避免这种行为，您需要设置 ssr 选项，因此：

ssr: false

然后在您的 jsx 中进行设置：

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

- Marekus

---

但是使用这个动态路由时，当路由改变时会导致页面刷新。 - undefined

Answer 2

也许你应该使用Promise来实现悬挂的效果。就像Nicholas Tower在这个链接中所说的那样。React Suspense is not working as intended。

- kelsky