Next.js(App Router)において「use client」はクライアントコンポーネントとサーバーコンポーネントの境界にのみ設置する

Next.js（App Router）の概要

Next.jsのコンポーネントは、デフォルトではサーバーコンポーネントとして機能します。
クライアントコンポーネントを利用する際には、ファイルの先頭で「use client」を宣言する必要があります。

「use client」の適切な使用

「use client」はどこでも宣言できますが、それが意味するのは全てのクライアントコンポーネントで使用すべきということではありません。
実際に、クライアントコンポーネントになるのは「“use client"が宣言されたファイル」ではなく、「宣言されたコンポーネントファイルをRootとしたSubtree全体」です。

汎用性の高いUIを開発する際には、親コンポーネントがサーバーコンポーネントとクライアントコンポーネントの両方になり得ることがあります。そのため、「use client」の使用は最小限に抑えることが望ましいです。これにより、コンポーネントの柔軟性を保ちつつ、不必要なクライアントサイドの処理を避けることができます。

つまり、「use client」はクライアントコンポーネントとサーバーコンポーネントの境界にのみ設置することが重要となります。

参考

吉井健文. 実践Next.js —— App Routerで進化するWebアプリ開発エンジニア選書. 株式会社技術評論社.

Tags:

TypeScript