載入 UI 與串流

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

即時載入狀態

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

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

export default function Loading() {
  // 您可以在 Loading 內新增任何 UI，包括骨架屏。
  return <LoadingSkeleton />
}

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

須知事項:

導航是即時的，即使使用以伺服器為中心的路由。

導航是可中斷的，這表示變更路由時無需等待路由內容完全載入即可導航至其他路由。

共享佈局在新路由區段載入時仍保持互動性。

建議： 為路由區段（佈局和頁面）使用 loading.js 約定，因為 Next.js 會優化此功能。

使用 Suspense 串流

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

須知事項:

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

什麼是串流？

要了解串流在 React 和 Next.js 中的運作方式，有助於理解 伺服器端渲染 (SSR) 及其限制。

使用 SSR 時，在使用者可以看到並與頁面互動之前，需要完成一系列步驟：

首先，在伺服器上擷取給定頁面的所有資料。
接著，伺服器渲染頁面的 HTML。
頁面的 HTML、CSS 和 JavaScript 會傳送至客戶端。
使用生成的 HTML 和 CSS 顯示非互動式使用者介面。
最後，React 水合 (hydrate) 使用者介面以使其可互動。

這些步驟是順序且阻塞的，這表示伺服器只能在所有資料擷取完成後才能渲染頁面的 HTML。並且，在客戶端上，React 只有在頁面中所有元件的程式碼都已下載後才能水合 UI。

使用 React 和 Next.js 的 SSR 有助於透過盡快向使用者顯示非互動式頁面來改善感知載入效能。

然而，由於在伺服器上擷取所有資料需要完成後才能向使用者顯示頁面，因此仍然可能很慢。

串流允許您將頁面的 HTML 分解為較小的區塊，並逐步將這些區塊從伺服器傳送至客戶端。

這使得頁面的部分內容可以更快顯示，而無需等待所有資料載入後才能渲染任何 UI。

串流與 React 的元件模型配合良好，因為每個元件可以被視為一個區塊。具有較高優先級（例如產品資訊）或不依賴資料的元件（例如佈局）可以先傳送，React 可以更早開始水合。具有較低優先級的元件（例如評論、相關產品）可以在其資料擷取完成後，在同一個伺服器請求中傳送。

當您希望防止長時間的資料請求阻擋頁面渲染時，串流特別有益，因為它可以減少首次位元組時間 (TTFB) 和首次內容繪製 (FCP)。它還有助於改善互動時間 (TTI)，特別是在較慢的裝置上。

範例

<Suspense> 的運作方式是包裹執行非同步動作（例如擷取資料）的元件，在動作進行時顯示備用 UI（例如骨架屏、旋轉圖示），並在動作完成後替換為您的元件。

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 文件。

SEO

Next.js 會在將 UI 串流至客戶端之前，等待 generateMetadata 內的資料擷取完成。這保證串流回應的第一部分包含 <head> 標籤。
由於串流是伺服器渲染的，因此不會影響 SEO。您可以使用 Google 的 Rich Results Test 工具來查看您的頁面在 Google 網路爬蟲中的顯示方式，並查看序列化的 HTML (來源)。

狀態碼

串流時，將返回 200 狀態碼以表示請求成功。

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

平台支援

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

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

即時載入狀態

使用 Suspense 串流

什麼是串流？

範例

SEO

狀態碼

平台支援

On this page