Parent Component？Owner Component？是甚麼東西？

UserCard 是被包進去的，但它的資料沒有任何變動，單純只是顯示使用者資訊。那我們可以透過 children 把它插進去，而不要讓 ProfileReRenderWrapper 負責控制它的狀態。這樣 UserCard 就不會因為 ProfileReRenderWrapper 的狀態改變而跟著 re-render。

拉回到 Next.js App Router：Client / Server Component 的拆法

你如果用的是 Next.js 的 App Router（也就是那個 app/ 目錄），應該知道所有 Component 預設都是 Server Component。

但只要用了 useState、useEffect 或有互動功能，就要加上 'use client'。

然後問題就來了：

Client Component 不能直接 import Server Component。

Client Component 不能直接導入 Server Component，因為 Server Component 是在伺服器端執行的，它的內容已經在伺服器渲染完成後變成靜態 HTML，而 Client Component 則在瀏覽器端運行，需要參與 React 的渲染週期。

'use client'

// 錯誤示範
import ServerComponent from './Server-Component'

export default function ClientComponent() {
  const [count, setCount] = useState(0)

  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <ServerComponent /> {/* 這裡會爆 */}
    </>
  )
}

那怎麼辦？這時候我們可以套用 Owner / Parent 的概念。

Client Component 不要當 Owner，它只要當 Parent。

把 Server Component 當作 children 傳進去就行：

'use client'
import { useState } from 'react'

export default function ClientComponent({ children }) {
  const [count, setCount] = useState(0)

  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      {children}
    </>
  )
}

然後在外面用的時候這樣寫：

import ClientComponent from './client-component'
import ServerComponent from './server-component'

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

這樣就解啦。因為這時候 ClientComponent 不再是 ServerComponent 的 Owner，只是 Parent，渲染控制權還是在外層的 Server Component 上。

小結一下

搞懂誰是 Parent 誰是 Owner，不只是為了理解架構，還能讓你的效能優化更清楚。而且在 Next.js 的 Server / Client Component 限制下，這種分工超實用。

所以，下次遇到：

• 為什麼這顆會一直 re-render？

• 為什麼我不能 import 某個 Component？

• 為什麼 children 傳進去就可以解？

想一下 Owner / Parent 誰是誰，你就會知道答案在哪。

如果你覺得這個觀念蠻酷但有點繞，也可以想成這樣：

Parent 是「你住哪」的概念，Owner 是「誰決定你住哪」的概念。

簡單粗暴，但很有用。