Next.js 中的伺服器元件與客戶端元件 何時以及如何使用它們

Next.js 13 引入了React Server Components，使開發人員能夠選擇渲染組件的位置和方式- 無論是在伺服器上以提高效能，還是在客戶端上以實現交互性。這種靈活性使我們能夠建立兼具速度和動態功能的應用程式。

在本文中，我們不僅將探討基礎知識，還將深入探討如何在客戶端元件中使用伺服器元件——這是建立動態、高效的應用程式時的常見需求。

了解伺服器組件

伺服器元件完全在伺服器上呈現，不需要任何客戶端 JavaScript。它們非常適合靜態內容，例如頁首、頁腳，甚至不需要使用者互動的資料驅動元件。

範例：簡單伺服器組件

// app/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

該元件在伺服器上呈現，不涉及任何客戶端交互，這意味著它使用更少的 JavaScript 載入速度更快。

伺服器元件的優點

• 減少 JavaScript 有效負載：伺服器元件減少傳送到瀏覽器的 JavaScript 量。
• 改進的資料取得：伺服器元件可以取得更接近資料庫的數據，從而減少網路延遲。

在伺服器元件中取得數據

// app/components/PostList.js
export default async function PostList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

此 PostList 元件在伺服器上取得資料並將預先渲染的 HTML 傳送到客戶端，確保更快的載入時間。

何時使用客戶端元件

當您需要互動性（例如表單輸入、事件偵聽器或動態內容）時，用戶端元件至關重要。這些元件在客戶端使用 JavaScript 來處理使用者互動。

範例：用於互動的客戶端元件

// app/components/SearchBar.js
'use client';  // This makes the component a client component

import { useState } from 'react';

export default function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

SearchBar 是互動式的，因此它需要是一個客戶端元件。您只能在客戶端元件中使用 useState 鉤子和其他 React 鉤子。

您可能有一個組合伺服器和客戶端元件的用例，所以我們接下來討論如何做到這一點：

組合伺服器和客戶端元件

Next.js 13 的核心優勢是能夠組合伺服器和客戶端元件。最佳實踐是預設使用伺服器元件，並將客戶端元件盡可能深入地推送到元件樹中。

範例：組合伺服器和客戶端元件

// app/layout.js
import SearchBar from './components/SearchBar';

export default function Layout({ children }) {
  return (
    <div>
      <header>My Blog</header>
      <SearchBar />  {/* Client component for interactivity */}
      {children}
    </div>
  );
}

SearchBar 元件處理客戶端互動性，而佈局的其餘部分則由伺服器渲染，在效能和互動性之間提供平衡。

相反，您可能有一個在客戶端元件內使用伺服器元件的用例。讓我們看看如何做到這一點。

如何在客戶端元件中使用伺服器元件

重要的是要了解伺服器元件可以嵌套在客戶端元件中，但不能直接匯入到其中。若要在客戶端元件中包含伺服器元件，請將其作為子元件或 prop 傳遞，以避免打破兩者之間的邊界。

範例：將伺服器元件傳遞給客戶端元件

這是一個真實的範例，其中伺服器元件作為子元件傳遞給客戶端元件：

// app/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

在上面的例子中：

• Profile 是一個伺服器元件，用於取得資料或顯示靜態內容。
• 儀表板是處理互動的客戶端元件（顯示/隱藏設定檔）。
• Profile 伺服器元件作為子元件傳遞給儀表板客戶端元件。

此模式可讓您利用伺服器渲染的優勢（更少的 JavaScript，提高效能），同時仍具有客戶端互動性。

第三方函式庫和客戶端元件

許多第三方程式庫（例如驗證提供者或 UI 元件）都依賴 React hooks，這些鉤子只能在客戶端元件中使用。以下是如何透過將第三方函式庫包裝在客戶端元件中來解決該限制：

範例：使用第三方輪播

// app/components/PostList.js
export default async function PostList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

透過將第三方react-slick輪播包裝在客戶端元件中，我們可以在伺服器渲染的頁面中使用它，同時仍然存取互動性等客戶端功能。

處理伺服器和客戶端元件之間的 props

在伺服器和客戶端元件之間傳遞資料時，道具必須是可序列化的（例如字串、數字、布林值）。無法傳遞函數或類別實例等複雜物件。

範例：將資料從伺服器傳遞到客戶端

// app/components/SearchBar.js
'use client';  // This makes the component a client component

import { useState } from 'react';

export default function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

UserCard 用戶端元件現在可以動態呈現從伺服器元件傳遞的數據，同時確保所有內容保持可序列化，從而順利通過伺服器-客戶端邊界。

總而言之，用最佳實踐來結束這一點將會很有趣。讓我們繼續下一步：

伺服器和客戶端元件組合的最佳實踐

以下是一些有效組合伺服器和客戶端元件的技巧：

1. 預設為伺服器元件：盡可能對靜態或資料驅動內容使用伺服器元件，以減少 JavaScript 負載並提高效能。

2. 使用客戶端元件進行互動：僅在需要使用者互動或特定於瀏覽器的 API 時使用客戶端元件。

3. 將客戶端元件移至樹下：將客戶端元件盡可能地推入元件樹中。這允許您的應用程式的更多內容在伺服器上呈現，從而提高效能。

4. 將伺服器元件作為子元件傳遞：如果需要在客戶端元件中使用伺服器元件，請將其作為子元件或 prop 傳遞，而不是直接匯入它。

結語：在表現和互動性之間取得平衡

使用 Next.js 13，您可以靈活地在伺服器和用戶端上渲染元件。透過預設使用用於靜態內容的伺服器元件和用於互動的用戶端元件，並透過仔細管理兩者之間的邊界，您可以建立既快速又動態的應用程式。

透過遵循此處的模式和範例（例如將伺服器元件傳遞到客戶端元件並精心組合它們），您將能夠利用 Next.js 13 的全部功能來建立高效能的互動式 Web 應用程式。

快樂編碼
我是麥可。

以上是Next.js 中的伺服器元件與客戶端元件 何時以及如何使用它們的詳細內容。更多資訊請關注PHP中文網其他相關文章！