Client Componentはいつどのように使用しますか?

Question

Accepted Answer

**Client Component**はブラウザで実行され(初期HTMLのためにサーバーでも事前レンダリングされます)。ファイルの先頭に**`"use client"`**ディレクティブを付けることでオプトインします。インタラクティビティ、状態、エフェクト、またはブラウザAPIが必要な場合に必要です。 ## 宣言する ```tsx "use client"; // MUST be the first line of the file import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); // ✅ hooks work here return ; // ✅ events } ``` ## Client Componentが必要な場合 ```text ✓ useState / useReducer / useEffect / useRef / useContext ✓ Event handlers (onClick, onChange, onSubmit) ✓ Browser APIs (window, localStorage, navigator, IntersectionObserver) ✓ Third-party libraries that use any of the above (most UI/animation libs) ``` ## ディレクティブは子に継承されるファイルを`"use client"`とマークすると、それと**インポートするすべてのもの**がクライアントバンドルの一部になります。そのため、クライアント境界は**小さく、ツリーの低い位置**に — 「クライアントアイランド」 — するべきであり、トップレベルレイアウトをクライアントとしてマークすべきではありません(アプリ全体をブラウザバンドルに引き込んでしまいます)。 ```tsx // ✅ Good: server page, small client island only where needed export default async function Page() { // Server Component const data = await getData(); return <>; // island is "use client" } ``` ## サーバーからクライアントへのデータ受け渡し ```tsx // Server Component fetches, passes serializable props down to the client island ``` ServerコンポーネントからClientコンポーネントに渡されるPropsは**シリアライズ可能**である必要があります(関数もクラスインスタンスも不可)。サーバー→クライアント境界を越えるためです。 ## なぜ重要なのか Client Componentは、サーバー優先のアプリにインタラクティビティを追加する方法です。スキルは、それらを最小限に保ち、葉で保つこと — 必要な場所にだけインタラクティビティを、他のすべての場所にはServer Componentsを — なので、最小限のJavaScriptを提供します。ツリーの高い位置に`"use client"`を誤って配置することは、バンドルを肥大化させ、Server Componentsの利点を失う一般的な誤りです。