📝

【 Next.js 13 】 Client Componentsのレンダリングフロー

2023/10/12に公開

Next.js

React

tech

Next.js13のClient Componentsのレンダリングフローについて触れた記事です。

特にNext.jsに触れはじめた方は、"use client"をつけておけばClient Componentは「クライアントサイドで、レンダリングされるもの」と感じられている方もいるのではないでしょうか。

あながち間違ってはいないのですが、結論、どちらもサーバサイドでレンダリングされるものですが、Client ComponentはhydrationでUIにインタラクティビティがアタッチされるという点で異なります。

Client Componentsとは

Next.jsのClient Componentsは、リクエスト時にクライアント上でレンダリングされるインタラクティブなUIを作成するためのものです。Next.jsでは、クライアントレンダリングはオプトインとなっており、Reactがクライアント上でどのコンポーネントをレンダリングするかを明示的に決める必要があります。

Client Componentsの利点

インタラクティビティ: Client Componentsは、state, effects, およびevent listenersを使用できるため、ユーザーへの即時のフィードバックの提供やUIの更新が可能です。
ブラウザAPIへのアクセス: Client Componentsは、geolocationやlocalStorageなどのブラウザAPIにアクセスできるため、特定のユースケース向けのUIを構築することが可能です。

レンダリングフロー

ざっくりとしたClient Componentsのレンダリングフローは次のようになります。

ユーザーがページをリクエストすると、Next.jsサーバーは「Server Component」と「Client Component」の両方の静的HTMLを生成する。
このHTMLはクライアント（ブラウザ）に送信され、非インタラクティブなものとして表示される。
ReactのhydrateRoot APIを使用して、静的HTMLがインタラクティブになるように「hydration」が行われる。
ユーザーが別のページに移動する場合、クライアントコンポーネントはクライアント側でPure CSRとしてレンダリングされる。

わかりやすくイメージ（シーケンス図）として表現すると、下記のような感じかと思います。