Nextjs: pemuatan atau penggantungan sandaran tidak muncul dalam pengeluaran
Saya telah memindahkan halaman peribadi saya ke direktori aplikasi menggunakan nextjs v13.
Saya mencuba dahulu dalam komponen 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>
);
}
Ini pun ada
// 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>
);
}
Kedua-duanya komited terhadap pembangunan tempatan
Tetapi mereka tidak muncul dalam penggunaan vercel saya
- Balut RSC dengan
Suspense: URL ini - Gunakan
loading.tsxfail: URL ini
Saya menggunakan nod secara setempat 18.16，在我的 vercel 部署中使用节点 18.x. Saya juga menggunakan projek nextjs dalam vercel menggunakan konfigurasi lalai.
Jika ada sesiapa yang memerlukan butiran lanjut, kod cawangan boleh didapati di sini
