はじめに
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を使う方針でコーディングしていこうと考えている。
次回以降
ざっくりと両者の違いを説明した程度のため、アプリケーションへの影響、コーディングへの影響を基本として、実際に試して確認していこうと思う。