跳到主要內容

載入 UI 和串流

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

Loading UI

即時載入狀態

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

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

loading.js special file
app/dashboard/loading.tsx
export default function Loading() {
  // You can add any UI inside Loading, including a Skeleton.
  return <LoadingSkeleton />
}

在同一個資料夾中,loading.js 將會巢狀於 layout.js 內。它會自動將 page.js 檔案和下方的任何子項目包裝在 <Suspense> 邊界中。

loading.js overview

要知道的好事:

  • 即使使用以伺服器為中心的路由,導航也是立即的。
  • 導航是可中斷的,這表示變更路由不需要等待路由的內容完全載入,才能導航到另一個路由。
  • 共用的版面配置在新的路由區段載入時保持互動性。

建議:針對路由區段(版面配置和頁面)使用 loading.js 慣例,因為 Next.js 已最佳化此功能。

使用 Suspense 進行串流

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

要知道的好事:

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

什麼是串流?

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

使用 SSR 時,使用者必須完成一系列步驟才能看到頁面並與之互動

  1. 首先,在伺服器上擷取指定頁面的所有資料。
  2. 然後,伺服器會渲染頁面的 HTML。
  3. 頁面的 HTML、CSS 和 JavaScript 會傳送到用戶端。
  4. 使用產生的 HTML 和 CSS 顯示非互動式使用者介面。
  5. 最後,React 會水合 (hydrate) 使用者介面,使其具有互動性。
Chart showing Server Rendering without Streaming

這些步驟是循序且會阻擋的,這表示伺服器只能在擷取所有資料後,才能渲染頁面的 HTML。而且,在用戶端,React 只能在下載頁面中所有元件的程式碼後,才能水合 UI。

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

Server Rendering without Streaming

但是,由於伺服器上的所有資料擷取都需要完成,頁面才能顯示給使用者,因此速度仍然可能很慢。

串流可讓您將頁面的 HTML 分解成較小的區塊,並逐步將這些區塊從伺服器傳送到用戶端。

How Server Rendering with Streaming Works

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

串流與 React 的元件模型搭配良好,因為每個元件都可以視為一個區塊。優先順序較高的元件(例如產品資訊)或不依賴資料的元件(例如版面配置)可以先傳送,而 React 可以更早開始水合。優先順序較低的元件(例如評論、相關產品)可以在其資料擷取後,在同一個伺服器請求中傳送。

Chart showing Server Rendering with Streaming

當您想要防止長時間的資料請求阻礙頁面渲染時,串流特別有用,因為它可以減少首位元組時間 (TTFB)首次內容繪製 (FCP)。它還有助於改善可互動時間 (TTI),尤其是在速度較慢的裝置上。

範例

<Suspense> 的運作方式是包裝執行非同步動作(例如擷取資料)的元件,在執行動作時顯示回退 UI(例如骨架畫面、旋轉圖示),然後在動作完成後換入您的元件。

app/dashboard/page.tsx
import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
 
export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

透過使用 Suspense,您可以獲得以下優勢

  1. 串流伺服器渲染 - 從伺服器到用戶端逐步渲染 HTML。
  2. 選擇性水合 - React 會根據使用者互動,優先決定要先讓哪些元件具有互動性。

如需更多 Suspense 範例和使用案例,請參閱 React 文件

SEO

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

狀態碼

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

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