Next.jsのApp Routerで、ReactのServer ComponentとClinet Componentの境界を理解したい【株式会社ライトコード】

1. はじめに

ブログの目的

• Server ComponentとClient Componentの境界を明確に理解すること。
• サーバーコンポーネントとクライアントコンポーネントの境界を正しく定義できるようになること
• • Next.jsのApp RouterではデフォルトでコンポーネントがServer になります。Client Componentを使用する場合は、'use client' で境界を定義できます。 'use client'を正しい場所に設置できるようになることを目的とします

なぜ境界を理解する必要があるのか

パフォーマンス面

サーバーコンポーネントとクライアントコンポーネントの境界を理解することで、どの処理をサーバー側で行い、どの処理をクライアント側で行うべきかを判断できます。

たとえば、重い計算処理やデータの取得はサーバー側で行い、クライアントに必要最低限のデータを送信することで、クライアントの負荷を軽減し、全体的なパフォーマンスを向上させることができます。

セキュリティ面

サーバーコンポーネントを利用することで、重要なデータやビジネスロジックをサーバー側で保持し、クライアントには最低限のデータしか送信しないようにすることができます。これにより、機密情報がクライアント側で露出するリスクを低減し、データの安全性を確保できます。

どこを境界とするかは、reactユーザーが決めることができます。

クライアントとサーバーの境界を、どこに設定するべきなのかを背景やそのコンポーネントの用途を含めて理解していこうと思います。

2. Server ComponentとClient Componentとは

Server Componentとは

バンドル前に事前にレンダリングされるコンポーネントです。

ビルド時に一度だけ実行することも、ウェブサーバを使用してリクエストごとに実行することができます。

Server ComponentはReactDOMServer APIを介して、Nodeサーバーなどのランタイム上で実行されます

参考：サーバ用 React DOM API

ブラウザにデータが送られないため、credentialsや機密情報がブラウザ側に漏れ出さずに実行できます。

そのため、サーバーコンポーネントの用途は以下になります。

Server Componentの用途

• データをフェッチする
• 機密情報を扱う
• 静的なコンテンツをレンダリングする

Server Componentがレンダリングするのは、RSCペイロードというデータです。

Next.jsのApp Routerでは、このRSCペイロードとClient ComponentのJSを実行してHTMLをレンダリングします。

Client Componentとは

ブラウザ・サーバーで実行されるコンポーネントです。

ブラウザ上で実行されるため、コンポーネントの状態管理やDOM操作、ブラウザのAPIを使用することができます。

そのため、サーバーコンポーネントの用途は以下になります。

Client Componentの用途

• インタラクティブなコンテンツ
• DOMの操作・イベントハンドリング・状態の管理など動的なコンテンツを扱う

3.なぜ、Server と Clientで境界が必要なのか

なぜこの境界が必要であるかを理解するためには、境界がないとき（Server Component 登場以前）のreactの課題を知る必要があります。

Server Component登場以前は、現在のClient Componentと同じで、ブラウザ・サーバーの両方でJSが実行されていました。

サーバーでのみ実行すべきJSも、バンドルされブラウザに送られてしまいます。

サーバーでのみ実行すべきJS

• ライブラリのインポート・パース
• データのフェッチ

課題

ブラウザに全てのJSを送信してしまうと、ページの表示期間中に変化しない静的なコンテンツをただレンダリングするためだけに、ユーザはライブラリを追加でダウンロードしてパースし、さらにページのロード後に別のリクエストがデータを取得してくるのを待つ必要がありました。

参考：server-components-without-a-server

Server Componentによる課題の解決

…

記事の続きは下のURLをクリック！

https://rightcode.co.jp/blogs/48187

エンジニア積極採用中です！

現在、WEBエンジニア、モバイルエンジニア、デザイナー、営業などを積極採用中です！

採用ページはこちら：https://rightcode.co.jp/recruit

社員の声や社風などを知りたい方はこちら：https://rightcode.co.jp/blogs?category=life

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。