︙

Rendering

レンダリングは、あなたが書いた code をユーザーインターフェースに変換します。React と Next.js は、あなたの code の一部を server または client 上でレンダリングできるハイブリッドな Web アプリケーションを作成することを可能にします。このセクションでは、これらのレンダリング環境、戦略、そして runtimes についての違いを理解するのに役立ちます。

Fundamentals

start と始めるにあたり、3 つの基本的なウェブコンセプトに精通していると役立ちます：

あなたのアプリケーションの code が実行できるEnvironments： server と client です。
ユーザーがアプリケーションを訪問または操作すると開始されるRequest-Response Lifecycle。
server と client code を分けるネットワーク境界。

レンダリング環境

ウェブアプリケーションをレンダリングできる環境は二つあります： client と server。

clientは、ユーザーのデバイス上のブラウザを指し、あなたのアプリケーションの code 用に server へ request を送ります。それから、server からの response をユーザーインターフェースに変換します。
serverは、あなたのアプリケーションの code を保存し、client からの Request を受け取り、適切な response を送り返すデータセンター内のコンピュータを指します。

歴史的に、development 者は server や client でコードを書く際に、異なる言語(例えば JavaScript や PHP)やフレームワークを使用せざるを得ませんでした。React を使うことにより、development 者は同一の言語(JavaScript)と同一のフレームワーク(例えば Next.js や任意のフレームワーク)を使用することができます。この柔軟性により、コンテキストスイッチングなしで両方の環境でコードをシームレスに書くことが可能になります。

しかし、各環境には自身の機能と制約があります。したがって、server や client に書く code は常に同じではありません。特定の操作(たとえば、データの取得やユーザー状態の管理)は、ある環境よりも他の環境の方が適していることがあります。

これらの違いを理解することは、React と Next.js を効果的に使うための鍵となります。詳細な違いと使用例については、ServerとClient Component ページで詳しく説明しますが、今はまず私たちの基礎を築き上げることに焦点を当てましょう。

Request-Response ライフサイクル

大まかに言えば、すべてのウェブサイトは同じRequest-Response Lifecycleに従います：

ユーザーアクション： ユーザーはウェブアプリケーションと対話します。これは link をクリックしたり、フォームを送信したり、ブラウザのアドレスバーに直接 URL を入力したりすることが含まれます。
HTTP Request ： client は、要求されているリソースについての必要な情報、使用されている method (例：GET、POST)、および必要に応じて追加のデータを含む、HTTP request を server に送信します。
server: server は request を処理し、適切なリソースで応答します。このプロセスにはルーティング、データの取得など、いくつかのステップが必要かもしれません。
HTTP response: request の処理後、server は HTTP レスポンスを client に送り返します。この response には、ステータスコード(request が成功したかどうかを client に伝えます)と要求されたリソース(例えば、HTML、CSS、JavaScript、静的アセットなど)が含まれています。
クライアント： client はリソースを解析して、ユーザーインターフェースを render します。
ユーザーアクション: ユーザーインターフェースがレンダリングされると、ユーザーはそれと対話することができ、全体のプロセスが再び始まります。

ハイブリッド Web アプリケーションを構築する主要な部分の一つは、ライフサイクル内で作業をどのように分割し、Network Boundary をどこに配置するかを決定することです。

ネットワーク境界

ウェブの development において、Network Boundaryは異なる環境を分離する概念的なラインです。たとえば、client と server、または server とデータストアの間などです。

React では、最も意味のある場所に Client-server ネットワークの境界を設定することを選びます。

舞台裏では、作業は二つに分けられます：client モジュールグラフとserver モジュールグラフです。 server モジュールグラフには、server 上でレンダリングされる全ての Component が含まれており、client モジュールグラフには、client 上でレンダリングされる全ての Component が含まれています。

あなたのアプリケーション内のファイルが互いにどのように依存しているかの視覚的表現として module graphs を考えると役立つかもしれません。

あなたは、境界を定義するために React の"use client"の規約を使用することができます。また、"use server"の規約もあり、これは React に server でいくつかの計算作業を行うように指示します。

Building Hybrid Applications

これらの環境で働く際には、あなたのアプリケーションの code の流れをunidirectional、つまり一方向的と考えることが有効です。つまり、response の間、あなたのアプリケーションの code は一方向に流れます：server から client へ。

client から server にアクセスする必要がある場合、同じ request を再利用するのではなく、新しいrequest を server に送信します。これにより、Component をどこに render するべきか、また、ネットワーク境界をどこに設定すべきかを理解しやすくなります。

実際には、このモデルは開発者に対し、結果を client に送信しアプリケーションをインタラクティブにする前に、最初に server 上で実行したいことを考えるように奨励しています。

この概念は、同じ component ツリー内であなたがclient と server components を交互に配置する方法を見るときに、より明確になります。