'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 機能を使用している場合、'use client' を含めるようにすべきです。これにより、それらのコンポーネントをサーバコンポーネントからインポートしてレンダーすることが可能になります。さもないと、ユーザはライブラリコンポーネントを自分で 'use client' ファイルにラップしなければなりません。これは面倒ですし、ライブラリが後でロジックをサーバに移動できなくなってしまいます。事前バンドル済のファイルを npm で公開する際は、'use client' となっているソースファイルは 'use client' でマークされたバンドルに含まれるようにし、サーバ上で直接使用できるエクスポートを含んだバンドルとは別になるようにしてください。
• クライアントコンポーネントは、今後もサーバサイドレンダリング (server-side rendering, SSR) やビルド時の静的サイト生成 (static site generation, SSG) の過程としては実行されます。これらは、コンポーネントの初期レンダー出力を HTML に変換し、JavaScript バンドルのダウンロード前に表示を行えるようにするために使われます。しかし、データベースから直接読み取るといったサーバ専用機能は使用できません。
• 'use client' のようなディレクティブは、ファイルの冒頭部分で、あらゆるインポート文や他のコードより上になければなりません（ただしコメントはディレクティブの上に記載できます）。シングルクォートまたはダブルクォートで書く必要があり、バックティックは使えません。（'use xyz' というディレクティブの形式は useXyz() というフックの命名規則に多少似ていますが、これは偶然です。）

使用法