Viteはサーバーとクライアントを判定していない

Transcript

1. 2026年8月 Viteはサーバーとクライアントを 判定していない ビルドがやっているのは、入口からimportを辿ることだけ 赤神 青空
2. ▪作っていたものと、ビルドで出てくるもの まず前提をそろえる TanStack Start で作ったアプリを Cloudflare Workers に載せる、という学習をしていました。 ビルドすると、成果物が2つ出てくる dist/client/ — ブラウザに送られる dist/server/ — Cloudflareで動く DBに触るコードも、画面のコードも、同じ src/ の中にある この2つが、どこで分かれているのかを知りたかった 今ココ 誤解 2/14
3. ▪サーバー専用のはずのものを、クライアントから触る わざと壊してみた 何が境界を守っているのかを知りたくて、コンポーネントから直接DBを呼びました。 typescript // src/routes/index.tsx — ブラウザで動くコンポーネント useEffect(() => { db.select().from(items).all().then(setData) }, []) 今ココ 誤解 3/14
4. ▪3つのうち、どれか どこで止まると思いますか 型で怒られるのか。ビルドで止まるのか。 それとも、ブラウザで落ちるのか。 1. 型 エディタに赤線が出る。 2. ビルド ビルドが通らない。 3. 実行時 ブラウザで落ちる。 私は1番だと思っていました。 今ココ 誤解 4/14
5. 01 仕組み 実際に出たログ 今ココ 仕組み 5/14
6. ▪最終行を見てください 出たのはこれ bash [plugin:vite:import-analysis] Failed to resolve import "cloudflare:workers" from "src/db/index.ts" 23:04:39 [vite] (client) Pre-transform error どちらのグラフで壊れたか、ログに書いてある 今ココ 仕組み 6/14
7. ▪拍子抜けするほど素朴です 答え Viteは、判定していない。 入口からimportを辿っているだけ。 止めたもの モジュール解決。client側に cloudflare:workers は 無い。 止めなかったもの 型。TypeScriptは「サーバー専用」を知らない。 入口の数だけグラフができる。この構成では client と ssr の2つ。 今ココ 仕組み 7/14
8. ▪同じソースに、違う入口から入る ビルドは2回走る 走るバンドラは同じです。Vite 6以降は環境を増やせますが、既定はこの2つになります。 bash building client environment → dist/client/ → ブラウザへ building ssr environment → dist/server/ → Cloudflareへ 今ココ 仕組み 8/14
9. ▪どちらに属するかは、繋がっているかどうかで決まる 辿った結果、グラフが2本できる クライアントのグラフ index.tsx → db/index.ts → cloudflare:workers 解決できずに停止 サーバーのグラフ server-entry → db/index.ts → cloudflare:workers Workers上にあるので解決できる 同じ db/index.ts でも、どちらのグラフに入るかで結末が変わります。 今ココ 仕組み 9/14
10. 02 規約 繋がりを見えるようにする仕掛け 今ココ 規約 10/14
11. ▪ファイルを分けずに、関数の単位で切る createServerFn は分割線のマーカー 関数を包むと、そのハンドラの中身は ssr のグラフに置かれます。 typescript const listItems = createServerFn().handler(async () => { return db.select().from(items).all() }) 今ココ 規約 11/14
12. ▪切り方が違うだけ 規約はどれも同じ問題を解いている TanStack createServerFn Start SvelteKit +page.server.ts React .server モジュール Router v7 今ココ 規約 関数の単位で分割線を引く 置き場所でサーバー専用を宣言する ファイル名でサーバー専用を宣言する 12/14
13. ▪私はこの2つを混同していました 守るのはビルド、繋ぐのは型 「境界を型で切る」と思っていたのですが、型は境界を切っていませんでした。 境界を守っているもの ＝ ビルドの分離 client と ssr で別々に辿られる 型は関与しない。だから赤線は出なかった 境界を越えて繋がっているもの ＝ 型 listItems() の戻り値は Item[] のまま届く レスポンスの型を手書きしなくていい 今ココ 規約 13/14
14. ▪今日話したこと まとめ 01 仕組み 判定ではなく、入口からimportを辿った結果が境界になっている。 02 確かめ方 どちらのグラフで壊れたかは、ログや成果物にそのまま出る。 03 規約 createServerFn も .server も、その繋がりを見せるための発明。 この原則が分かれば "use client" も「入口を増やす指示」と読める 今ココ まとめ 14/14