Next.js 14中Suspense的Fallback不显示，如何解决？

问题根源 #

1. Suspense标签写法错误：你把Suspense拆成了两个独立标签，没有将<Posts>包裹在<Suspense>内部，导致Suspense无法监听组件的加载状态。
2. Fetch默认缓存：Next.js的fetch默认会缓存请求结果，即便你加了delay=3000，刷新页面时也会直接读取缓存，不会触发延迟，自然看不到Loading状态。
3. Async组件的Suspense绑定问题：Async组件的异步逻辑需要被Suspense正确包裹，才能触发fallback展示。

修复方案 #

1. 修正Suspense的使用方式 #

把Home组件里的Suspense改为正确的包裹式写法：

import { Suspense } from "react";
import Posts from "@/components/Posts";

export default async function Home() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Posts />
      </Suspense>
    </div>
  );
}

2. 禁用Fetch缓存并确保延迟生效 #

修改getPosts函数，禁用缓存同时手动模拟延迟（jsonplaceholder的delay参数可能不稳定）：

async function getPosts() {
  let res = await fetch(`https://jsonplaceholder.typicode.com/posts`, {
    cache: 'no-store' // 强制每次请求都重新获取数据，不使用缓存
  });
  // 手动添加3秒延迟，确保能看到Loading状态
  await new Promise(resolve => setTimeout(resolve, 3000));
  return res.json();
}

const Posts = async () => {
  const posts = await getPosts();

  return (
    <div>
      {posts.map((post: any) => (
        <div key={post.id} className="mb-3">
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default Posts;

3. 额外注意事项 #

• 如果你的Posts组件需要作为客户端组件使用，需在组件顶部添加'use client'指令，但此时Async组件的写法不适用，建议改用useEffect配合状态管理来处理异步请求。
• 生产环境中，建议使用revalidate选项而非no-store来控制缓存策略，避免频繁请求接口。

验证 #

修改完成后刷新页面，就能看到Loading...的提示，3秒后正常展示帖子列表。

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