はじめに

Next.jsは、v12まで業務で使用経験はあるが、以降のversionは、ざっくり触っている状態で、なんとなくapp routerを使う程度の知識しか持っていない。
このなんとなくを解消するために、Server Components、Client Componentsに関して知識を深めていく。

尚、参考にしたサイトは以下です。

`Client Components`と`Server Components`の違い

`Client Components`とは

Webブラウザが、JavaScriptの実行、HTML、CSSの組み立てを行い、レンダリングされるコンポーネント。
このレンダリングプロセスは、クライアントサイドレンダリング(CSR)と呼ばれる。

`Server Components`とは

サーバが、JavaScriptの実行、HTML、CSSの組み立てを行い、レンダリングされるコンポーネント。
このレンダリングプロセスは、サーバーサイドレンダリング(SSR)と呼ばれる。

アプリケーションへの影響

項目	Client	Server
バンドルサイズ	大きくなりがち (圧縮されたHTML、CSS、JavaScript)	小さめ (組み立てられたHTML)
デバイスリソース	食いがち	影響が少ない
SEO	検索エンジンがコンテンツのインデックスを効果的に作成しない可能性あり	検索エンジンが HTML コンテンツをクロールしてインデックスを作成
セキュリティ	機密情報漏洩リスク	サーバで機密情報を扱うため、安全

コーディングへの影響

項目	Client	Server
HTMLイベントハンドラ	できる	できない
React hooks	使える	使えない
React class component	使える	使えない
ブラウザAPI	使える	使えない

まとめ

Server Componentsを利用することで、アプリケーションに多くのメリットをもたらすことができる。ただし、コーディングを行う上で、いくつかできないことがある。(私自身、React hooksはガンガン使っていたので、Server Componentsでの実装が正直苦痛...)
どうしてもClient Componentsでないとだめだ！という場合を除き、Server Componentsを使う方針でコーディングしていこうと考えている。

次回以降

ざっくりと両者の違いを説明した程度のため、アプリケーションへの影響、コーディングへの影響を基本として、実際に試して確認していこうと思う。