Nextjs: Lade- oder Suspense-Fallback wird in der Produktion nicht angezeigt

Question

Ich habe meine persönlichen Seiten mit nextjs v13 in das Anwendungsverzeichnis migriert.

Ich habe es zuerst in der Suspense 组件的 fallback 属性中添加 RSC 加载程序，并添加位于 app 目录中每个路由的路径中的 loading-Komponente versucht.

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

Das gibt es auch

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

Beide engagieren sich für die lokale Entwicklung

Aber sie werden in meiner Vercel-Bereitstellung nicht angezeigt

• Umschließen Sie RSC mit Suspense: dieser URL
• Verwenden Sie loading.tsx Datei: diese URL

Ich verwende Node lokal 18.16，在我的 vercel 部署中使用节点 18.x. Ich habe auch das nextjs-Projekt in Vercel mit der Standardkonfiguration bereitgestellt.

Falls jemand weitere Details benötigt, findet er den Filialcode hier

Answer 1

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