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 正在執行的內建快取 -- 它將無限期地快取資料預設情況下。在生產中，您的帖子看起來就像是立即加載的