loading.js

特殊檔案 loading.js 可幫助您使用 React Suspense 建立有意義的載入介面。透過此約定，您可以在路由區段的內容串流載入時，從伺服器顯示即時載入狀態。一旦完成，新內容會自動替換顯示。

export default function Loading() {
  // 或自訂載入骨架元件
  return <p>載入中...</p>
}

export default function Loading() {
  // 或自訂載入骨架元件
  return <p>載入中...</p>
}

在 loading.js 檔案中，您可以加入任何輕量級的載入介面。您可能會發現使用 React 開發者工具手動切換 Suspense 邊界很有幫助。

預設情況下，此檔案是伺服器元件，但也可以透過 "use client" 指令作為客戶端元件使用。

參考

參數

載入介面元件不接受任何參數。

行為

即時載入狀態

即時載入狀態是導航時立即顯示的備用介面。您可以預先渲染載入指示器，如骨架或旋轉圖示，或是未來畫面的重要部分，如封面照片、標題等。這有助於使用者理解應用程式正在回應，並提供更好的使用者體驗。

透過在資料夾內新增 loading.js 檔案來建立載入狀態。

export default function Loading() {
  // 您可以在 Loading 中加入任何介面，包括骨架。
  return <LoadingSkeleton />
}

export default function Loading() {
  // 您可以在 Loading 中加入任何介面，包括骨架。
  return <LoadingSkeleton />
}

在同一資料夾中，loading.js 會嵌套在 layout.js 內。它會自動將 page.js 檔案及其下方子元件包裹在 <Suspense> 邊界中。

SEO

Next.js 會等待 generateMetadata 內的資料載取完成後，再將介面串流至客戶端。這保證串流回應的第一部分包含 <head> 標籤。
由於串流是伺服器渲染，不會影響 SEO。您可以使用 Google 的豐富結果測試工具查看頁面在 Google 網路爬蟲中的顯示方式，並檢視序列化的 HTML (來源)。

狀態碼

串流時會回傳 200 狀態碼，表示請求成功。

伺服器仍可在串流內容本身中向客戶端傳達錯誤或問題，例如使用 redirect 或 notFound 時。由於回應標頭已傳送至客戶端，回應的狀態碼無法更新。這不影響 SEO。

瀏覽器限制

某些瀏覽器會緩衝串流回應。您可能看不到串流回應，直到回應超過 1024 位元組。這通常只影響「hello world」應用程式，而不影響實際應用程式。

平台支援

部署選項	支援情況
Node.js 伺服器	是
Docker 容器	是
靜態匯出	否
轉接器	依平台而定

了解如何設定串流當自行託管 Next.js 時。

範例

使用 Suspense 串流

除了 loading.js，您也可以手動為自己的介面元件建立 Suspense 邊界。App Router 支援使用 Suspense 串流。

<Suspense> 的工作原理是包裹執行非同步操作（例如載取資料）的元件，在操作進行時顯示備用介面（例如骨架、旋轉圖示），並在操作完成後替換為您的元件。

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>載入動態...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>載入天氣...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>載入動態...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>載入天氣...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

使用 Suspense 可獲得以下好處：

串流伺服器渲染 - 從伺服器逐步渲染 HTML 至客戶端。
選擇性水合 - React 根據使用者互動優先處理哪些元件先變為可互動。

更多 Suspense 範例和使用案例，請參閱 React 文件。

版本歷史

版本	變更
`v13.0.0`	引入 `loading` 功能。

On this page