HonoでAPIだけ作って素のReact DOMでSPAを書くアーキテクチャ

最新のHonoはViteへの統合が強化されたので

カテゴリ	技術スタック
クライアントサイド	React SPA
サーバーサイド	Hono API
デプロイ	Cloudflare Pages

という構成を手軽に作れるようになっていて便利でした

これを軸に素のReact APIを触って遊ぶ環境が作れそうです(Server APIもworkerdで動く範囲なら使えるかも?)

とりあえず以下のソースコードでデプロイまでできるかを試しました

プロジェクトのベースはnpm create hono@latestで作りました

DEMO: https://hono-spa-react.pages.dev/

• react react-dom @vitejs/plugin-react-swc をnpm installしています

デバッグ

しかしこの構成だと@hono/vite-dev-serverによるvite devは実行時エラーになり動きません(!)

react-dom_client.js?v=f8955f15:11222 Uncaught Error: Objects are not valid as a React child (found: object with keys {isEscaped, tag, props, children, key}). If you meant to render a collection of children, use an array instead.

viteのserver側のビルドをhono/jsxからreactにして解決する必要がありそうですが……

かわりに

❯ vite build -w
❯ vite build -w --mode client
❯ wrangler pages dev dist

をそれぞれ起動してデバッグしていました

追記

HonoでAPI付き雑React SPA最小を参考に以下の設定を追加すると解決しました

vite.config.ts

    return {
+      ssr: {
+        external: ['react', 'react-dom']
+      },
      plugins: [
        pages(),
        devServer({
          entry: 'src/index.tsx'
        })
      ]
    }

tsconfig.json

    "jsx": "react-jsx",
-    "jsxImportSource": "@hono/jsx"
+    "jsxImportSource": "react"
  },

デプロイ

dist以下のファイルをアップロードします

❯ vite build --mode client && vite build
❯ find dist
dist
dist/static
dist/static/client.js
dist/_worker.js

❯ wrangler pages deploy dist/