レンダリング
レンダリングとは、記述したコードをユーザーインターフェースに変換するプロセスです。ReactとNext.jsを使用すると、サーバー側とクライアント側でコードの一部をレンダリングできるハイブリッドWebアプリケーションを作成できます。このセクションでは、これらのレンダリング環境、戦略、ランタイムの違いを理解するのに役立ちます。
基礎知識
まず、以下の3つの基本的なWeb概念に慣れておくと良いでしょう:
- アプリケーションコードが実行される環境: サーバ゙ーとクライアント
- ユーザーがアプリケーションにアクセスまたは操作したときに開始されるリクエスト-レスポンスライフサイクル
- サーバーコードとクライアントコードを分離するネットワーク境界
レンダリング環境
Webアプリケーションがレンダリングされる環境には、クライアントとサーバーの2つがあります。
- クライアントとは、ユーザーのデバイス上のブラウザを指し、アプリケーションコードをサーバーにリクエストし、サーバーからのレスポンスをユーザーインターフェースに変換します。
- サーバーとは、アプリケーションコードを保存し、クライアントからのリクエストを受信して適切なレスポンスを返すデータセンター内のコンピュータを指します。
従来、開発者はサーバーとクライアント用のコードを書く際に異なる言語（JavaScript、PHPなど）やフレームワークを使用する必要がありました。Reactを使用すると、開発者は同じ言語（JavaScript）と同じフレームワーク（Next.jsや選択したフレームワーク）を使用できます。この柔軟性により、コンテキストを切り替えることなく両環境のコードをシームレスに記述できます。
ただし、各環境には独自の機能と制約があるため、サーバーとクライアント用に記述するコードが常に同じとは限りません。データ取得やユーザー状態の管理など、特定の操作は一方の環境に適しています。
これらの違いを理解することは、ReactとNext.jsを効果的に使用するための鍵です。詳細な違いとユースケースについては、サーバーコンポーネントとクライアントコンポーネントのページで説明します。まずは基礎を固めましょう。
リクエスト-レスポンスライフサイクル
一般的に、すべてのWebサイトは同じリクエスト-レスポンスライフサイクルに従います:
- ユーザーアクション: ユーザーがWebアプリケーションと対話します（リンクのクリック、フォームの送信、ブラウザのアドレスバーへの直接URL入力など）。
- HTTPリクエスト: クライアントがサーバーにHTTPリクエストを送信し、リクエストされるリソース、使用されるメソッド（
GET、POSTなど）、必要に応じて追加データを含みます。 - サーバー処理: サーバーがリクエストを処理し、適切なリソースで応答します（ルーティング、データ取得などのステップを含む場合があります）。
- HTTPレスポンス: リクエスト処理後、サーバーがクライアントにHTTPレスポンスを返します（リクエストの成功・失敗を示すステータスコードと、要求されたリソース（HTML、CSS、JavaScript、静的アセットなど）を含みます）。
- クライアント処理: クライアントがリソースを解析してユーザーインターフェースをレンダリングします。
- ユーザーアクション: ユーザーインターフェースがレンダリングされると、ユーザーはそれと対話でき、プロセス全体が再び開始されます。
ハイブリッドWebアプリケーションを構築する主な部分は、ライフサイクルでの作業の分割方法とネットワーク境界の配置場所を決定することです。
ネットワーク境界
Web開発において、ネットワーク境界は異なる環境を分離する概念的な線です（例: クライアントとサーバー、またはサーバーとデータストア間）。
Reactでは、最も理にかなった場所にクライアント-サーバーのネットワーク境界を配置できます。
内部的には、作業はクライアントモジュールグラフとサーバーモジュールグラフの2つの部分に分割されます。サーバーモジュールグラフにはサーバーでレンダリングされるすべてのコンポーネントが含まれ、クライアントモジュールグラフにはクライアントでレンダリングされるすべてのコンポーネントが含まれます。
モジュールグラフは、アプリケーション内のファイルが互いにどのように依存しているかを視覚的に表現したものと考えると良いでしょう。
Reactの"use client"規則を使用して境界を定義できます。また、"use server"規則もあり、クライアント側でサーバー上で計算作業を行うようにReactに指示します。
ハイブリッドアプリケーションの構築
これらの環境で作業する際は、アプリケーション内のコードの流れを一方向と考えると役立ちます。つまり、レスポンス中にアプリケーションコードはサーバーからクライアントへ一方向に流れます。
クライアントからサーバーにアクセスする必要がある場合は、同じリクエストを再利用するのではなく、サーバーに新しいリクエストを送信します。これにより、コンポーネントをどこでレンダリングし、ネットワーク境界をどこに配置するかを理解しやすくなります。
実際には、このモデルにより、開発者はアプリケーションをインタラクティブにする前に、まずサーバーで実行する内容を考えることが奨励されます。
この概念は、クライアントコンポーネントとサーバーコンポーネントを同じコンポーネントツリーで組み合わせる方法を見るとより明確になります。