Nextjs: Lade- oder Suspense-Fallback wird in der Produktion nicht angezeigt
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.tsxDatei: 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
