2種類のコンポーネント

このセクションでこれまで作成してきたすべてのコンポーネントは、意識していなかったかもしれませんが、ある場所で実行されていました。それはサーバー上です。これは特別にオンにしたモードではなくデフォルトであり、Next.jsにおける最も重要な概念です。

コンポーネントには正確に2つの種類があり、それぞれが他方にはできないメリットをもたらします。

サーバーコンポーネント: デフォルト

• ページの送信前に、サーバー上で1回実行されます
• async にすることができるため、コンポーネント内で直接データを await できます
• ブラウザーにJavaScriptを送信しません: ユーザーはコードではなく結果をダウンロードします

落とし穴：ページがブラウザに届く頃には、サーバーコンポーネントの処理は終了しています。それはスナップショットです。何も記憶できませんし、クリックに反応することも、変更されることもありません。

クライアントコンポーネント: オプトイン

ページに応答性を持たせる必要がある場合は、最上部に次の1行を追加してファイルをブラウザ用に指定します。

'use client';

これにより、そのファイルはクライアントコンポーネントとしてマークされ、クライアントコンポーネントのみが以下を使用できます。

• フック: useState、useEffect など
• イベントハンドラー: onClick、onChange、…
• ブラウザ API: window、localStorage

このトレードオフに注目してください。サーバーコンポーネントは高速で静かですが、静的（フリーズした状態）です。クライアントコンポーネントは動的ですが、そのコードをブラウザにダウンロードして実行する必要があります。

したがって、今後はすべてのコンポーネントについて「どちらが好きか？」ではなく、「この特定のパーツはユーザーに応答する必要があるか？」と問いかけることになります。答えが「いいえ」である場合（そして通常はそうです）、サーバー上に残しておきます。