我們在前幾天的文章都有看到Suspense這個React內建的元件，這篇要來介紹一下這個Suspense的細部功能。Suspense可以讓我們在它底下的children還沒載入完成時呈現一個替代的顯示畫面，在這邊會稱為fallback會像是一個loading的樣式或任何簡單的React node。目的在於改善使用者在網頁載入內容時的體驗。

使用

<Suspense fallback={<Loading />}>
  <SomeComponent /> // 放入要載入的children
</Suspense>

支援

目前只有支援Suspense-enabled的children內容才可以使用Suspense元件。

像是延遲載入的[lazy](https://react.dev/reference/react/lazy)、實驗中的use還有一些支援Suspense-enabled的框架像是，Relay和Next.js。像是在effect或是event handler裡的fetch可是沒有支援的。

底下的children會一起顯示

在Suspense底下的children會全部一起顯示，即使其他部分已經載入，有部分元件還沒完成就會等待這個元件完成後才一起顯示，在此之前都會顯示fallback prop的內容，官網範例。而且即使children是巢狀的也可以支援Suspense，不一定要是第一個root元件也可以。

<Suspense fallback={<Loading />}>
  <Biography /> //我1.5秒就好了
  <Panel>
    <Albums /> // 我要3秒，等我
  </Panel>
</Suspense>

多個Suspense共用

Suspense可以一層一層包一層，children會依照最近的Suspense來顯示fallback，也可以達到分批顯示的效果。下方這個範例首先顯示<BigSpinner />等<Biography />完成後就先顯示<Biography />和<AlbumsGlimmer />，等待載入完成後才顯示<Albums />。範例連結

<Suspense fallback={<BigSpinner />}>
  <Biography /> // 我1.5秒就好了
  <Suspense fallback={<AlbumsGlimmer />}>
    <Panel>
      <Albums /> // 我要3秒，你先顯示
    </Panel>
  </Suspense>
</Suspense>

參考

https://react.dev/reference/react/Suspense