Getting Started: React Essentials | Next.js
React Server Components は、サーバーとクライアントを活用したハイブリッドアプリケーション構築のための新しいメンタルモデル
- JavaScript バンドルのサイズ削減
- async コンポーネントを使える
- 自動最適化
- App Router はデフォルトで Server Components
- 「use client」ディレクティブで Client Components にオプトイン
- Client Components 内で Server Components をインポートできない
- Server Components を Client Components の Props として渡すことは可能
- Server から Client Components に渡される Props は、シリアライズできる必要がある。つまり、関数や日付を直接 Client Components に渡すことはできない。
- Client Components は、主にクライアントでレンダリングされますが、Next.js では、サーバーでプリレンダリングして、クライアントでハイドレーションすることも可能です。
- "use client"は、すべてのファイルで定義する必要はありません。クライアントモジュールの境界は、「エントリーポイント」で一度だけ定義すればよく、そこにインポートされたすべてのモジュールが Client Components とみなされる。
- Next.js では、最初のページロード時に、Server Components と Client Components の両方が HTML としてサーバー上にプリレンダリングされ、最初のページロードが高速化されます。
- 現在、サードパーティ製コンポーネントは、まだ"use client"ディレクティブを持っていません。そのため Client Components 内では期待通りに動作しますが、Server Components 内では動作しません。
- クライアント専用の機能に依存するサードパーティ製コンポーネントを、独自の Client Components でラップすることができます。
- Client Components はコンポーネントツリーの Leaves で使う
- server only を使うことで意図しないサーバーコードのクライアント利用を防ぐことができる
- クライアントでデータを取得する特別な理由がない限り、Server Components でデータを取得することをお勧めします。データ取得をサーバーに移すことで、パフォーマンスとユーザーエクスペリエンスの向上につながります。