Next.js道場学習
いまは Server と Client の境界に集中しています。ここが読めるようになると、 Next.js の他の話は全部つながります。
- Server と Client の選び方迷ったら Server Component から書き始めて、状態やイベント、ブラウザ API が必要になった部分だけを Client Component へ切り出します。
- Client Component とは何かClient Component は、ファイルの先頭に use client と書くことでブラウザにも送られる React コンポーネントです。
- Client Component の中に Server Component を置くClient Component の中に Server Component を置きたいときは、import ではなく children で渡します。
- Hydration とは何かHydration は、サーバーが送った HTML に、ブラウザ側の React を接続して操作できるようにする処理です。
- ブラウザに何が届くのかServer Component のコードはブラウザに届きませんが、Client Component へ渡した props は表示していなくても全部届きます。
- Server から Client へ渡せる値Server Component から Client Component へ渡せるのは値だけで、関数とクラスのインスタンスは渡せません。
- Server Component とは何かServer Component は、サーバー側だけで実行され、その JavaScript がブラウザに送られない React コンポーネントです。
- Server Function の渡し方関数は Client Component に渡せませんが、use server を書いた Server Function だけは渡せます。
- server-only と client-only の使い方モジュールを間違った側から使わせないための印が server-only と client-only です。
- use client はどこに書くのかuse client はファイルの先頭に一度だけ書き、そこから下のツリーを Client Component にするためのディレクティブです。