Nextjs : le chargement ou le repli en suspens n'apparaît pas en production
J'ai migré mes pages personnelles vers le répertoire de l'application en utilisant nextjs v13.
J'ai d'abord essayé dans le composant 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>
);
}
Il y a aussi ça
// 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>
);
}
Tous deux engagés dans le développement local
Mais ils n'apparaissent pas dans mon déploiement Vercel
- Enveloppez RSC avec
Suspense: cette URL - Utiliser
loading.tsxfichier : cette URL
J'utilise node localement 18.16，在我的 vercel 部署中使用节点 18.x. J'ai également déployé le projet nextjs dans Vercel en utilisant la configuration par défaut.
Si quelqu'un a besoin de plus de détails, le code de l'agence peut être trouvé ici
