Waku

Daishi Kato 製の Waku を採用した最小構成の React Server Components アプリです。テンプレートは RSC 境界の 両側を ReScript で提供します: Server Component (Greet.res、JS は配信されない) と Client Component (Counter.res、薄い TSX "use client" ラッパー越しにクライアント化)。

生成されるレイアウト

src/
├── pages/
│   └── index.tsx
├── components/
│   ├── Greet.res
│   ├── Counter.res
│   └── CounterClient.tsx
└── __tests__/
    └── Greet.test.mjs
tsconfig.json
rescript.json
package.json

主なファイル

  • src/pages/index.tsx — Server Component (src/pages/ 配下の Waku 既定)。ReScript の Greet を直接、CounterClient Client ラッパーを併せて import します。

  • src/components/Greet.res — Server Component の本体。サーバー側で HTML にレンダリングされ、このコンポーネントの JS は一切配信されません。

  • src/components/Counter.res — useState を使った ReScript 製 Client Component の本体。

  • src/components/CounterClient.tsx — "use client" ディレクティブを持ち、ReScript の make 関数を再エクスポートする薄い TSX ラッパー。ReScript 自身は "use client" を出力できないため、この小さなファイルが正攻法のワークアラウンドになります。

npm スクリプト

コマンド

説明

dev

rescript -w と並行して waku dev を起動します。

build

ReScript をコンパイルしてから waku build を実行します。

start

本番サーバーを起動します。

test

Vitest を実行します。

Day-two ポインタ

  • Server Component の追加 — src/components/ 配下に新しい .res を追加し、ページや別の Server Component から import するだけで OK です。Client ラッパーは不要です。

  • Client Component の追加 — 本体を ReScript で書き、先頭が "use client" で始まり make を再エクスポートする <Name>Client.tsx ラッパーを追加します。ラッパーはできるだけ薄く保ってください。

  • Server Functions — お使いの Waku バージョンで安定していれば、サーバーファイルから任意の関数をエクスポートして Client Component から呼び出します。Waku がビルド時に RPC へ変換します。