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
Suspense
: URL ini loading.tsx
fail: 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
Anda tidak menyertakan cara memuatkan data, tetapi jika anda menggunakan yang baharu
fetch
maka ia mungkin berkaitan dengan caching terbina dalam seterusnya sedang dilakukan -- ia akan cache data selama-lamanya secara lalai. Dalam pengeluaran, siaran anda akan kelihatan seperti dimuatkan serta-merta