Client Component と Server Component の違い

はじめに

Next.jsを使ったアプリケーションを開発中にClient ComponentとServer Componentという言葉を知りました。あまりよく知らずプロジェクトを進めていたが、絶対に知っておいたほうが良い予感がしました。ていうか、知っておかないといけないものな気がだんだんしてきています。
　なので、本記事ではClient ComponentとServer Componentについてまとめていきます。

結論：データ取得系はServer Component、ボタンとか動的な更新はClient Component

Next.jsでのそれぞれの役割

Server Components

基本的にlayoutやpageのデフォルトの設定はServer Componentsで、サーバー上でデータのフェッチやUIの要素をレンダリングしてくれたり、それをキャッシュしたりclientに渡したりする役割があります。

Client Components

アプリケーション内において、何かユーザーが特定の操作をするときやブラウザAPIを用いる場合はそういう機能をClient Componentsで組み込んでいく。

それぞれをいつ使うか

Client/Server Componentsはそれぞれ違うことが可能で、用途によってそれぞれを使い分けることが良い。

Client Componentsをいつ使うか

• StateやEvent Handlers（onClick, onChange）
• useEffect
• ブラウザオンリーのAPI
• 自分で作ったhooks

Server Componentsをいつ使うか

• DBからデータをフェッチしたり、DBに直接つながるAPIなど
• APIキー、トークンなどの秘密の情報をクライアントに漏らさず伝える
• ブラウザに送るコード量を減らしたいとき
• ページを開いた時に最初のコンテンツが表示されるまでの時間を減らしたりなどしたいとき

まとめ

もっと深掘ればいろいろと発見はありそうだが、とりあえずの理解として、

• 静的で、データ取得とか、APIキーのような裏側ロジック系はServer Component
• ボタンとかUI系や、動的に更新するものはClient Component
  っていう超ざっくりな理解をしました。今のところ軽い理解はできたし、使い分け方もなんとなくわかったがもう少し時間かけて調べる価値はありそうなので、また追記をする予定。

より深い知識

App RouterではServer Componentを使うほうがパフォーマンスが上がるという情報をどこかで見たが、本当にそうなのかを検証している素晴らしい記事を見つけました。Next.jsで開発をしていて、最適化をしていこうと思ったら重要な情報になりそうなので、今度こちらの記事をここに追記しようと思います。
React Server Components: Do They Really Improve Performance?

（参考： Next.js公式ドキュメント）