Client Componentはブラウザで実行され(初期HTMLのためにサーバーでも事前レンダリングされます)。ファイルの先頭に**"use client"**ディレクティブを付けることでオプトインします。インタラクティビティ、状態、エフェクト、またはブラウザAPIが必要な場合に必要です。
宣言する
tsx
;
{ useState } ;
() {
[count, setCount] = ();
;
}
✓ 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"とマークすると、それとインポートするすべてのものがクライアントバンドルの一部になります。そのため、クライアント境界は小さく、ツリーの低い位置に — 「クライアントアイランド」 — するべきであり、トップレベルレイアウトをクライアントとしてマークすべきではありません(アプリ全体をブラウザバンドルに引き込んでしまいます)。
// ✅ Good: server page, small client island only where needed
export default async function Page() { // Server Component
const data = await getData();
return <><StaticContent data={data} /><InteractiveWidget /></>; // island is "use client"
}
// Server Component fetches, passes serializable props down to the client island
<LikeButton initialLikes={post.likes} postId={post.id} />
ServerコンポーネントからClientコンポーネントに渡されるPropsはシリアライズ可能である必要があります(関数もクラスインスタンスも不可)。サーバー→クライアント境界を越えるためです。
Client Componentは、サーバー優先のアプリにインタラクティビティを追加する方法です。
スキルは、それらを最小限に保ち、葉で保つこと — 必要な場所にだけインタラクティビティを、他のすべての場所にはServer Componentsを — なので、最小限のJavaScriptを提供します。
ツリーの高い位置に"use client"を誤って配置することは、バンドルを肥大化させ、Server Componentsの利点を失う一般的な誤りです。
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する