'use client'

• リファレンス
  • 'use client'
• 使用法

リファレンス

'use client'

ファイルの最上部に 'use client'; を追加すると、どこからインポートされたファイルであるかに関わらず、そのファイル（それが使用する任意の子コンポーネントを含む）がクライアント上で実行されるものであるとマークします。

'use client';

import { useState } from 'react';

export default function RichTextEditor(props) {
  // ...

'use client' とマークされたファイルがサーバコンポーネントからインポートされると、互換性のあるバンドラは、当該インポートをサーバ専用コードとクライアントコードとの間の「切り離しポイント」として扱います。モジュールグラフでこのポイントおよび下側にあるコンポーネントは、useState のようなクライアント専用の React 機能を使用できます。

注意点

• クライアント専用の React 機能を使用するあらゆるファイルに 'use client' を追加していく必要はありません。サーバコンポーネントファイルからインポートされるファイルにのみ追加します。'use client' はサーバ専用コードとクライアントコードとの間の境界を示すものです。ここよりツリーの下側にあるあらゆるコンポーネントは自動的にクライアント上で実行されます。'use client' の書かれたファイルからエクスポートされるコンポーネントはサーバコンポーネントからレンダーされるため、シリアライズ可能な props を持つ必要があります。
• 'use client' ファイルがサーバファイルからインポートされる場合、インポートされた値は React コンポーネントとしてレンダーされるか、もしくはクライアントコンポーネントに props 経由で渡されます。それ以外の使い方をすると例外をスローします。
• 'use client' ファイルが他のクライアントファイルからインポートされる場合、ディレクティブは効果を持ちません。これにより、サーバコンポーネントとクライアントコンポーネントの両方から使用できるクライアント専用のコンポーネントを作成できます。
• 'use client' ファイルのすべてのコード、およびそれが（直接的にまたは間接的に）インポートするすべてのモジュールはクライアントモジュールグラフの一部となるため、ブラウザが表示するためにはクライアントに送信され、クライアントで実行される必要があります。クライアントでのバンドルサイズを減らし、サーバ機能を最大限に活用するためには、可能な限りツリーの下部に state（および 'use client' ディレクティブ）を移動し、レンダーされたサーバコンポーネントを children としてクライアントコンポーネントに渡します。
• props はサーバとクライアントの境界を越えてシリアライズされるため、これらのディレクティブの配置の仕方がクライアントに送信されるデータ量に影響を与える可能性があります。必要以上に大きなデータ構造を避けてください。
• サーバ専用機能もクライアント専用機能も使用しないコンポーネント（例：<MarkdownRenderer>）は、一般的に 'use client' でマークすべきではありません。マークしないことにより、サーバコンポーネントから使用されるときにはサーバ上でのみレンダーされ、クライアントコンポーネントから使用されるときにはクライアントバンドルに含まれるようになります。
• npm に公開されるライブラリは、シリアライズ可能な props でレンダーでき、クライアント専用の React 機能を使用する React コンポーネントに、'use client' を含めるべきです。これにより、それらのコンポーネントをサーバコンポーネントからインポートしてレンダーすることが可能になります。さもないと、ユーザはライブラリコンポーネントを自分で 'use client' ファイルにラップしなければなりません。これは面倒ですし、ライブラリが後でロジックをサーバに移動できなくなってしまいます。事前バンドル済のファイルを npm に公開する際は、'use client' となっているソースファイルは 'use client' でマークされたバンドルに含まれるようにし、サーバ上で直接使用できるエクスポートを含んだバンドルとは別になるようにしてください。
• クライアントコンポーネントは、今後もサーバサイドレンダリング (server-side rendering, SSR) やビルド時の静的サイト生成 (static site generation, SSG) の一部としては実行されます。これらは、コンポーネントの初期レンダー出力を HTML に変換し、JavaScript バンドルがダウンロードされる前に表示を行えるようにするために使えます。しかし、データベースから直接読み取るといったサーバ専用機能は使用できません。
• 'use client' のようなディレクティブは、ファイルの冒頭部分、あらゆるインポート文や他のコードの上になければなりません（ただしディレクティブの上にコメントは記載できます）。シングルクォートまたはダブルクォートで書かれていなければならず、バックティックは使えません。（'use xyz' というディレクティブ形式は useXyz() というフックの命名規則に多少似ていますが、これは偶然です。）

使用法