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

如果您还需要任何其他信息，请告诉我。

我尝试了各种方法，例如延迟加载、添加延迟等等，但仍然不起作用。我需要在加载数据时看到后备组件的显示。

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..