Next.js 13中Suspense fallback加载状态不显示问题求助

你的问题出在Next.js 13 App Router下对Suspense和异步组件的处理逻辑和传统React不同，以下是针对性的修复方案：

核心原因 #

Next.js 13 App Router默认使用服务器组件，React.lazy仅适用于客户端组件，且异步服务器组件不需要通过React.lazy引入，直接配合Suspense即可触发fallback。你之前的代码混用了两种加载方式，导致Suspense未正常工作。

修复方案（服务器组件场景推荐） #

修改page.js #

移除React.lazy，直接导入Trending组件：

import { Suspense } from "react";
import Loading from "./loading";
import Trending from "./Trending";

export default function Page() {
  return (
    <div>
      <Suspense fallback={<Loading />}>
        <Trending />
      </Suspense>
    </div>
  );
}

Trending组件保持不变 #

你的Trending是异步服务器组件，Next.js会自动识别并在数据加载/延迟期间触发Suspense的fallback：

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;

  await new Promise((resolve) => setTimeout(resolve, 3000));

  return (
    <div>
      <li>{data.results[0].title}</li>
    </div>
  );
}

客户端组件场景（需交互时使用） #

如果Trending需要作为客户端组件（比如包含交互逻辑），需做以下调整：

修改Trending组件 #

添加'use client'指令，将异步数据请求移至useEffect（客户端组件不能直接是异步函数）：

'use client';
import axios from "axios";
import { useState, useEffect } from "react";

export default function Trending() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get(
        `https://api.themoviedb.org/3/trending/movie/day?api_key=1428e09fe38be9df57355a8d6198d916`
      );
      await new Promise((resolve) => setTimeout(resolve, 3000));
      setData(res.data);
    };
    fetchData();
  }, []);

  if (!data) return null;

  return (
    <div>
      <li>{data.results[0].title}</li>
    </div>
  );
}

修改page.js #

保留React.lazy，确保客户端组件的懒加载触发Suspense：

import { Suspense } from "react";
import Loading from "./loading";
const Trending = React.lazy(() => import("./Trending"));

export default function Page() {
  return (
    <div>
      <Suspense fallback={<Loading />}>
        <Trending />
      </Suspense>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Suraj Vishwakarma