10
章節10
伺服器與客戶端元件
要了解伺服器元件和客戶端元件如何運作，熟悉兩個網頁基礎概念會有所幫助
伺服器和客戶端環境
在網頁應用程式的環境下
- 客戶端是指使用者裝置上的瀏覽器，它會向伺服器發送應用程式程式碼的請求。然後，它會將從伺服器收到的回應轉換成使用者可以互動的介面。
- 伺服器是指儲存應用程式程式碼、接收來自客戶端的請求、執行一些計算並傳回適當回應的資料中心電腦。
每個環境都有其自身的功能和限制。例如，透過將渲染和資料擷取移至伺服器，您可以減少傳送到客戶端的程式碼量，從而提高應用程式的效能。但是，正如您先前所學，要使您的 UI 具有互動性，您需要在客戶端上更新 DOM。
因此，您為伺服器和客戶端編寫的程式碼並不總是相同。某些操作（例如資料擷取或管理使用者狀態）更適合在其中一個環境中執行。
網路邊界
網路邊界是一條概念上的分界線，用於區隔不同的環境。
在 React 中，您可以選擇在元件樹中的何處放置網路邊界。例如，您可以在伺服器端擷取資料並渲染使用者的貼文（使用伺服器元件），然後在客戶端渲染每個貼文的互動式 LikeButton（使用客戶端元件）。
同樣地，您可以建立一個在伺服器端渲染並在多個頁面之間共用的 Nav 元件，但如果您想要顯示連結的活動狀態，則可以在客戶端渲染 Links 列表。
在幕後，這些元件被分成兩個模組圖。伺服器模組圖（或樹）包含所有在伺服器端渲染的伺服器元件，而客戶端模組圖（或樹）包含所有客戶端元件。
伺服器元件渲染完成後，一種稱為 React 伺服器元件酬載 (RSC) 的特殊資料格式會被傳送到客戶端。RSC 酬載包含：
- 伺服器元件的渲染結果。
- 客戶端元件應渲染位置的佔位符（或空位），以及其 JavaScript 檔案的參考。
React 使用這些資訊來整合伺服器和客戶端元件，並在客戶端更新 DOM。
讓我們看看它是如何運作的。
使用客戶端元件
將 <button> 元素和 handleClick() 函式從 page.js 移至新的 LikeButton 元件。
export default function LikeButton() {
function handleClick() {
setLikes(likes + 1);
}
return <button onClick={handleClick}>Like ({likes})</button>;
}接下來，移動 likes 狀態和引入的程式碼。
import { useState } from 'react';
export default function LikeButton() {
const [likes, setLikes] = useState(0);
function handleClick() {
setLikes(likes + 1);
}
return <button onClick={handleClick}>Like ({likes})</button>;
}現在，要讓 LikeButton 成為客戶端元件，請在檔案頂部新增 React 的 'use client' 指令。這會告知 React 在客戶端渲染該元件。
'use client';
import { useState } from 'react';
export default function LikeButton() {
const [likes, setLikes] = useState(0);
function handleClick() {
setLikes(likes + 1);
}
return <button onClick={handleClick}>Like ({likes})</button>;
}回到 page.js 檔案，將 LikeButton 元件引入您的頁面。
import LikeButton from './like-button';
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
export default function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
return (
<div>
<Header title="Develop. Preview. Ship." />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<LikeButton />
</div>
);
}儲存兩個檔案並在瀏覽器中檢視您的應用程式。現在沒有錯誤了，一旦您進行更改並儲存，您應該會注意到瀏覽器會自動更新以反映更改。
這個功能稱為快速重新整理 (Fast Refresh)。它能讓您立即看到任何編輯的回饋，並且在 Next.js 中已預先設定完成。
摘要
回顧一下，您學習了伺服器端和客戶端環境，以及何時使用它們。您也學到 Next.js 預設使用 React 伺服器端元件來提升效能，以及如何選擇在 UI 互動性較小的部分使用客戶端元件。
延伸閱讀
關於伺服器端和客戶端元件，還有更多可以學習的地方。以下是一些額外的資源：