Nextjs：加载或悬念回退不会在生产中显示

Question

我已使用 nextjs v13 将我的个人页面迁移到应用程序目录。

我尝试首先在 Suspense 组件的 fallback 属性中添加 RSC 加载程序，并添加位于 app 目录中每个路由的路径中的 loading 组件。

// src/app/posts/loading.tsx
import { Container } from '~/components/organisms/container';

export default function Loading() {
  return (
    <Container>
      {/* Add a big loading string with tailind */}
      <span className="text-6xl font-bold text-center text-red-500">Loading...</span>
    </Container>
  );
}

还有这样的

// src/app/posts/page.tsx
export default async function PostsPage() {
  return (
    <Container>
      <PageHeader
        title='Posts'
        description="I love to write about things I'm learning. 
            Blogging is a great way to improve and share knowledge.
            And who knows, maybe one day it might help me to write a book!"
      />
      <Suspense
        fallback={
          <Container>
            {/* Add a big loading string with tailind */}
            <span className='text-6xl font-bold text-center text-red-500'>
              Loading...
            </span>
          </Container>
        }
      >
        {/* @ts-expect-error Server Component */}
        <Posts />
      </Suspense>
    </Container>
  );
}

两人都致力于本地开发

但是它们没有显示在我的 vercel 部署中

• 用 Suspense 包装 RSC：此网址
• 使用 loading.tsx 文件：此网址

我在本地使用节点 18.16，在我的 vercel 部署中使用节点 18.x。我还使用默认配置在 vercel 中部署 nextjs 项目。

如果有人需要更多详细信息，可以在此处找到分支代码

Answer 1

您没有包括如何加载数据，但如果您使用新的 fetch 那么它可能与 nextjs 正在执行的内置缓存 -- 它将无限期地缓存数据默认情况下。在生产中，您的帖子看起来就像是立即加载的