対象読者
- JavaScriptとWeb開発の基礎に理解がある方
- Reactを用いたJavaScriptアプリケーション開発の経験者
前提環境
筆者の検証環境は以下の通りです。
- macOS Sonoma 14.2.1
- Node.js 21.4.0／npm 10.2.4
- React 18.2.0
- Next.js 14.0.4
UIと非同期通信の状態管理を擦り合わせるのは疲れる
ブラウザ上でもサーバー上でも、JavaScriptのランタイムが提供する通信処理のAPIは、基本的に非同期で扱うことが推奨されています。現代ではFetch APIを前提にした非同期処理のインターフェースを持っており、async関数やawait式と統合されることで、より便利に非同期通信を扱えるようになっています。
さて、一方で、Reactに目を向けてみましょう。Reactの得意分野は、宣言的にUIを記載することと、そのUIの状態を管理すること、そしてそれらを組み合わせて効率的にDOMツリーを更新することです。Reactが管理するUIの内部で発生したイベントに応じて、UIの状態を変更することは、Reactの得意分野と言えるでしょう。
では、Reactの外部由来で発生するイベントには何があるかというと、特に厄介なのが非同期通信の結果の受け取りです。Reactの管理下にあるライフサイクルの範囲で起こるイベントと比べて、非同期通信の結果はいつ届くのかわかりません。また、ひとつの画面を初期表示するために複数の外部データソースからデータを取得する必要がある場合、どの順で通信を呼び出し、待っている間にどのようなUIを表示し、データが届き次第UIにどう反映するかを考えるのは、非常に煩雑です。
こういった課題感に対して、Reactチームが生み出したのが、第1回でも触れたReact Server Componentsです。これは、ReactのUIをサーバー側でレンダリングすることで、外部APIとの通信やDBに伴う非同期処理をサーバー側で処理している間に解決するというものです。コンポーネントをasync関数として記述できるため、複数のデータソースを連鎖的に呼び出すような、複雑な非同期処理であっても、容易に表現できます。
本記事では、React Server ComponentsをApp Routerがどのように活用しているのかを解説します。まずは、データ取得に関する話題を扱い、その後にデータ送信に関する話題を扱います。
App Routerとデータ取得
まずは、データ取得に関する特徴について見ていきましょう。実は、データ取得についてはApp Router固有の話題というのはあまり多くはありません。React Server Componentsの「コンポーネントをasync関数として定義でき、非同期処理をawait式で待ち受けた結果を直接使って、JSXによるUI構築を行うことができる」という特徴を活かす形でコンポーネントを記述すれば、直感的にUIを構築できるため、 "非同期処理とUI" という関係性は、大筋としてリスト1のようなサンプルで説明できます。
import { getTodoList } from "@/app/db";
export default async function TodoList() { // (1)
const todoList = await getTodoList(); // (2)
return (
<main>
<h1>Todo App</h1>
<h2>タスク一覧</h2>
<div>
{todoList.map((item) => ( // (3)
<div key={item.id}>
<p>{item.title}</p>
</div>
))}
</div>
</main>
);
}
（1）では、async関数としてコンポーネントを定義しています。これはReact Server Componentsの特徴ですね。この関数は、非同期処理を行うことができるため、（2）のように外部データソースからデータを取得することができます。この非同期処理の結果を、直接JSXによるUI構築に利用できるため、（3）のように、非同期処理の結果を直接map関数に渡して、リストを構築することができます。
