はじめに
こんにちは、エンジニアのkeitaMaxです。
サーバコンポーネントとクライアントコンポーネントについてよく理解していないで困ったことがあったので、調べたことについてまとめます。
サーバコンポーネントとクライアントコンポーネントについて
Next.js 13.2でサーバコンポーネントとクライアントコンポーネントの概念が追加されたようです。
PHPとJavascriptで開発をするときに例えると、
サーバコンポーネントはPHPのようなサーバー側の処理、クライアントコンポーネンはJavascriptのようなブラウザ側の処理、というようなイメージらしいです。
サーバコンポーネント
React Server Components を使用すると、サーバー上でレンダリングしたり、オプションでキャッシュしたりできる UI を作成できます。 Next.js では、レンダリング作業がルート セグメントごとにさらに分割され、ストリーミングと部分レンダリングが可能になり、次の 3 つの異なるサーバー レンダリング戦略があります。
(引用：https://nextjs.org/docs/app/building-your-application/rendering/server-components)
メリット
サーバコンポーネントを使用するメリットとしては、公式では７つ紹介されていました。
-
データ フェッチ
データフェッチをサーバ側で行うことにより、フェッチにかかる時間とリクエスト数が減少し、パフォーマンスが向上するらしいです。 -
セキュリティ
トークンや API キーなどのロジックをクライアントに見られる心配がなくなります。 -
キャッシュ
サーバー上でレンダリングすることで、結果をキャッシュして後続のリクエストなどで再利用することができるので、パフォーマンスが向上し、コストが削減されるそうです。 -
パフォーマンス
ブラウザでダウンロード・解析・実行するクライアント側のJavaScript が少なくなるため、ネットが遅いユーザーやデバイスを使用しているユーザーにとって、パフォーマンスが向上するらしいです。 -
最初のページ読み込みと最初のコンテンツフル ペイント (FCP)
サーバ上でHTMLを生成しているので、Javascriptのダウンロードや解析を待たずにユーザがすぐにページを開くことができます。 -
検索エンジンの最適化とソーシャル ネットワークの共有性
サーバ側でHTMLを生成しているので、SSOが向上するらしいです。 -
ストリーミング
準備ができたらクライアントに随時送信することができる(ストリーミング)ので、サーバ上でページ全体がレンダリングするのを待たずにページの一部をより早く表示できるらしいです。
サーバレンダリング戦略
また、公式には3つのサーバレンダリング戦略があると記載されていたので、それぞれ見ていこうと思います。
静的レンダリング
静的レンダリングを使用すると、ルートはビルド時、またはデータの再検証後にバックグラウンドでレンダリングされます
(引用：https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default)
ビルドするときにレンダリングします。
ユーザが変わっても同じ情報を出すときに使用するらしいです。
ダイナミックレンダリング
ダイナミック レンダリングを使用すると、リクエスト時にルートがユーザーごとにレンダリングされます。
(引用：https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering)
リクエストがあった時にレンダリングをします。
ルートにユーザごとのパラメータが付与されていたり、リクエストのみ知ることができる情報をもっていたりする時に使用するらしいです。
ストリーミング
ストリーミングを使用すると、サーバーから UI を段階的にレンダリングできます。作業はいくつかのチャンクに分割され、準備が整うとクライアントにストリーミングされます。これにより、ユーザーはコンテンツ全体のレンダリングが完了する前に、ページの一部をすぐに確認できるようになります。
(引用：https://nextjs.org/docs/app/building-your-application/rendering/server-components#streaming)
段階的にレンダリングすることができます。
情報取得までに時間がかかるものをレンダリングするときに使用するらしいです。
使用方法
Appルータでデフォルトで使用できます。
また、"use server"をファイルの一番最初に記載すると使用することができます。
クライアントコンポーネント
クライアント コンポーネントを使用すると、サーバー上で事前レンダリングされる対話型 UI を作成できます。クライアント JavaScript を使用してブラウザで実行できます。
このページでは、クライアント コンポーネントがどのように機能するか、どのようにレンダリングされるか、いつ使用できるかについて説明します。
(引用：https://nextjs.org/docs/app/building-your-application/rendering/server-components)
メリット
クライアントコンポーネントを使用するメリットとしては、公式では2つ紹介されていました。
-
インタラクティブ性
状態を管理することができるので、UIが向上するらしいです。 -
ブラウザ API
位置情報などのブラウザ用のAPIや、ローカルストレージにアクセスすることができます。
使用方法
Pageルータでデフォルトで使用できます。
また、"use client"をファイルの一番最初に記載すると使用することができます。
おわりに
サーバコンポーネントとクライアントコンポーネントをよく理解していないせいで、AppルータにしたときにAPIをたたくところで詰まったことがありました。
この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。
最後まで読んでいただきありがとうございました！
参考