NextJS 13 為每個組件加載組件

Question

我正在嘗試通過構建監視列表來學習 nextjs，目前，我正在創建將保持價格的項目組件。 我想要完成的是顯示所有價格，但如果調用需要一段時間，我希望該組件呈現加載組件。 例如

   {/* @ts-expect-error Server Component */}
   <PriceFetch sleepTime="100"></PriceFetch> 
   {/* @ts-expect-error Server Component */} 
   <PriceFetch sleepTime="1000"></PriceFetch>
   {/* @ts-expect-error Server Component */} 
<PriceFetch sleepTime="10000"></PriceFetch>

我想要發生的是第一個組件加載，而其他兩個組件仍然顯示加載第二個兩個加載。 SleepTime 是一個 promise，它會在那個時間休眠。 我附上了我的應用程序目錄的圖片。

我試過使用狀態，但我想避免這樣做，這樣我就可以讓組件成為服務器端組件

Answer 1

意識到我可以通過包裝自己的懸念來做到這一點哈哈。 IE

        <Suspense fallback={<h1>Loading profile...</h1>}>
      {/* @ts-expect-error Server Component */}
      <PriceFetch name="10"></PriceFetch>
    </Suspense>
    <Suspense fallback={<h1>Loading 2...</h1>}>
      {/* @ts-expect-error Server Component */}
      <PriceFetch name="100"></PriceFetch>
    </Suspense>
    <Suspense fallback={<h1>Loading profile3...</h1>}>
      {/* @ts-expect-error Server Component */}
      <PriceFetch name="1000"></PriceFetch>
    </Suspense>