【ITニュース解説】What is 'use client' in Next.js?

近年、Webアプリケーション開発において、パフォーマンスの最適化と開発体験の向上は常に重要な課題となっている。その中で、Next.jsのApp Routerが導入され、開発者はコンポーネントを「サーバーコンポーネント」と「クライアントコンポーネント」の2種類で扱うことができるようになった。この新しいパラダイムの中心にあるのが、「use client」ディレクティブである。システムエンジニアを目指す初心者にとって、この概念を理解することは、現代のWebフロントエンド開発の基礎を築く上で非常に重要である。

まず、Next.jsのApp Routerでは、すべてのコンポーネントがデフォルトで「サーバーコンポーネント」として扱われるという点を理解することが出発点となる。サーバーコンポーネントは、その名の通りサーバー側でレンダリングされ、生成されたHTMLがブラウザに送られる。このアプローチには、いくつかの大きなメリットがある。例えば、ブラウザに送られるJavaScriptのバンドルサイズを大幅に削減できるため、ページの読み込みが速くなり、ユーザー体験が向上する。また、サーバー側でデータを取得したり、複雑な処理を実行したりすることで、クライアント側の負荷を軽減できる。検索エンジン最適化（SEO）の観点からも、サーバー側で完全にレンダリングされたHTMLを提供できるため有利である。

しかし、Webアプリケーションには、ユーザーとのインタラクションが必要不可欠な場面が多数存在する。例えば、ボタンをクリックしたときに何らかのアクションを実行したり、フォームに入力された値に基づいて表示を更新したり、ユーザーの操作に応じてUI（ユーザーインターフェース）を動的に変更したりするようなケースである。このような「インタラクティブ性」や「状態管理」は、ReactのHooks（useStateやuseEffectなど）や、ブラウザ固有の機能（windowオブジェクトやlocalStorage、DOMイベントハンドラなど）を利用して実現されるが、これらはすべて「クライアント側」（つまりブラウザ上）で動作する機能である。デフォルトがサーバーコンポーネントであるNext.jsでは、これらのクライアント固有の機能はそのままでは利用できない。

ここで「use client」の出番となる。このディレクティブは、ファイルの冒頭に "use client"; と記述することで、そのファイルとそのファイルがインポートする依存関係を、サーバーではなくクライアント側でレンダリングされる「クライアントコンポーネント」としてマークする。これにより、前述したようなReact Hooks、イベントハンドラ（onClickやonChangeなど）、ブラウザAPI（localStorage、window、documentなど）、あるいはChart.jsやReact-Quillのようなクライアントサイドで動作するJavaScriptライブラリなどを、そのコンポーネント内で問題なく利用できるようになる。もし「use client」を記述せずにこれらの機能を使おうとすると、Next.jsはエラーを発生させるか、予期しない動作を引き起こすことになる。

「use client」が内部的にどのように動作するかというと、Next.jsはビルド時にアプリケーション内のファイルをスキャンし、「use client」ディレクティブが存在するかどうかを確認する。このディレクティブが検出された場合、そのファイルとそれがインポートするすべてのコンポーネントやモジュールは、クライアントサイドで実行されるJavaScriptバンドルとしてパッケージ化され、ブラウザに送信される。一方、サーバーコンポーネントは、ブラウザに送られる前にサーバー側でHTMLに変換され、そのHTMLと、必要に応じてシリアライズ（データ形式を変換すること）されたプロパティのみがクライアントに送られる。クライアントコンポーネントのようにJavaScriptバンドルが直接送られることはないため、クライアント側のファイルサイズが非常に小さく保たれるのである。

このサーバーコンポーネントとクライアントコンポーネントは、柔軟に組み合わせて使用できる。重要なルールとして、「サーバーコンポーネントはクライアントコンポーネントをインポートできるが、クライアントコンポーネントはサーバーコンポーネントを直接インポートできない」というものがある。例えば、全体のページをサーバーコンポーネントとして定義し、そのページ内でインタラクティブなボタンやフォームといった一部のUI要素にのみ「use client」をマークしたクライアントコンポーネントを配置する、という構造が可能である。これにより、アプリケーションの大部分はサーバーで高速にレンダリングしつつ、ユーザーインタラクションが必要な箇所にのみ最小限のJavaScriptをクライアントに送るという、非常に効率的なハイブリッドアプリケーションを構築できる。

したがって、Next.js開発における推奨される考え方は、「デフォルトはサーバーコンポーネント」とし、高速で軽量なウェブページを目指すことである。そして、状態管理、イベント処理、またはブラウザAPIをどうしても利用する必要がある場合に限り、「use client」を「スイッチ」のように利用し、そのコンポーネントをクライアントコンポーネントに切り替える。この「use client」は、Reactの持つ強力なインタラクティブ性を、Next.jsのApp Router環境にもたらすための、非常に重要なディレクティブであると理解すると良い。アプリケーションの大部分はサーバーで処理し、本当に必要な部分だけをクライアントに「委任」することで、パフォーマンスと開発効率の両立が実現されるのである。