Nextjs: pemuatan atau penggantungan sandaran tidak muncul dalam pengeluaran
P粉685757239
P粉685757239 2024-03-27 18:50:05
0
1
449

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.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

P粉685757239
P粉685757239

membalas semua(1)
P粉937769356

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan