Server Componentsはページ全体を再レンダリングする代わりに、変更が必要な部分だけを効率的に更新することができる。
Server Components
サーバーコンポーネントは、サーバー上でのみレンダリングされ、クライアントにはHTMLとして送信される。
- コンポーネントは状態を持つことができない
- データフェッチングを行ったり、サーバー上のリソースにアクセスしたりすることができる
- ブラウザにJavaScriptを送信しないため、結果としてクライアント側のパフォーマンスが向上する
Client Components
- 従来のReactコンポーネントと同様に、クライアントサイドでレンダリングされ、状態を持つことができる
- ユーザーのインタラクションに対して反応するために使用
- 例えばクリックや入力などのユーザーイベントを処理します。
SSR と Server Components の違い
SSR
- 各リクエストでサーバー上で全体のページがレンダリングされ、HTMLがクライアントに送信される。
- 一度ページがクライアントにロードされた後、それ以降の操作（リンククリックにより移動する等）はクライアントで処理
- ページ全体が再度サーバー上でレンダリングされることはない。
Server Components
- リクエストごとに特定のコンポーネントがサーバー上でレンダリングされる
- その結果（生成されたHTMLではなく、特定のインストラクション）がクライアントにストリーミングされてレンダリングされる
- クライアントサイドのJavaScriptの実行が減少してパフォーマンスが向上。
- サーバー状態（例えば、データベースから直接データを取得するなど）にアクセス可能。これはSSRやクライアントサイドレンダリングのコンポーネントでは困難。
Server Componentsのクライアントへのストリーミングとは
- データがリアルタイムでクライアントに送信され、到着と同時に処理が始まることを指す。
- サーバーコンポーネントがレンダリングされると、その結果がクライアントにストリーミングされる。
- クライアントはサーバーからデータを待つことなく、到着したデータからすぐにレンダリングを開始できる
- ユーザーが低速のネットワーク接続を使用している場合に有用
- 初回レンダリング時間が大幅に削減される
次は動きも試していく