水分子社區（HOH）前端共學營 - 筆記(4)

第二周筆記 - Server Component 與 Client Component

當大家使用到Nextjs時，看到不同介紹和文檔時，在內容中都會經常見到 Server Component 與 Client Component，然而大家又對它們有多少了解呢?
為了讓大家進一步了解，我就整理了相關資訊作出初步介紹。

在探討它們之前，首先要認識什麼是Server與Client。

Server (伺服器) 與 Client (客戶端)

Server (伺服器) 就是指數據中心中的計算機，它主要是用於儲存應用程式程式碼、接收來自客戶端的請求、執行一些計算過程然後將結果發出去。
Client (客戶端) 是指用戶設備上的瀏覽器，它會向伺服器發送請求，然後從伺服器接收到的回應(想要的結果)，之後再轉換合適的格式，然後展示在用戶介面上。

Server Component

在 Nextjs 項目下的 app 目錄中，所有 component 都會被預設為 Server Component，而 Server Component 和 Client Component 可以同時存在相同的地方(文件夾)。開發者可以自行選擇不同的 component 想要渲染的環境。
在 Server Component 中的 component 可以保證只在 server side 進行渲染。

Client Component

在 Client Component 中的 component 會主要在 client side 進行渲染，不過 Next.js 中可以在 server side 預渲染，完成之後再於 client side 進行混合使用。

然而，在使用 Client Component 時會有限制，例如: 在 Client Component 裡是不能直接使用 Server Component，需要透過其他方式引入使用。因為 Client Component 是在 Server Component 之後渲染，在渲染 Client Component 時沒辦法回頭渲染 Server Component。

'use client';

// 這是錯誤的例子
import ServerComponent from './ServerComponent';

export default function ClientComponent() {
  return (
    <div>
        <ServerComponent />
    </div>
  );
}

因此以上的寫法是不可行的，會出現報錯。

怎樣在 Client Component 使用 Server Component ?

如果要使用 Server Component 的話，就不能直接使用，而是要以 children props 的形式把Server Component 傳入，方法如下:

例子1

1. 首先假設 Server Component 是 app/ServerComponent.tsx

export default function ServerComponent() {
    return (
      <div>
          This is ServerComponent
      </div>
    );
  }

2. 修改 app/ClientComponent.tsx

'use client';

//import ServerComponent from './ServerComponent';

export default function ClientComponent({children}:any) {
  return (
    <div>
        {children}
    </div>
  );
}

3. 修改 Page.tsx

import ServerComponent from './ServerComponent';
import ClientComponent from './ClientComponent'

export default function Home() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

4. 執行項目

npm run dev

5. 打開 http://localhost:3000/

如果能看到以上畫面就表示成功。

怎樣判斷在什麼時候用 Client Component / Server Component ?