TL;DR
- React 19 のサーバコンポーネントとサーバアクションでサーバとクライアントの境界があいまいになるので、Effect でコードを整理する方法を示すテンプレートである。
- フレームワークには、React 19 の機能をほぼ備えた軽量な Waku を使う。
内容
動機
記事によると、React 19 は サーバコンポーネントやサーバアクションによって、サーバをクライアントに近づける。そのため、サーバのコードの整理のしかたは、クライアントだけのアプリでのいつものやり方とは変わる。
Effect allows to organize a maintainable and testable codebase for both client and server
Effect を使うと、クライアントとサーバの両方で、保守しやすくテストしやすいコードにできる。クライアントとサーバのコードを分け、その境界を扱いやすくする役にも立つ。
構成
テンプレートは Effect、React 19、TypeScript で書かれ、GitHub のリポジトリが付いている。React 19 の機能のほとんどに対応した軽量なフレームワークで、少ない設定で Effect と React 19 の組み合わせを見せられるので、Waku を選んだとしている。内容は次の 8 つのモジュールに分かれている。
- Project setup
- Effect server API
- Effect in server components
- Client and server boundary
- Server actions with Effect
- Client state with Effect
- Effect on the client
- Effect services for web interfaces