シニアエンジニアのy43z氏がZennに投稿した記事です。社内の稼働管理システムをCloudflare Workers上で構築する実務プロジェクトで、Next.js(OpenNext on Workers)からHono + hono/jsx SSR + Reactアイランド構成へ切り替えた経緯を解説しています。このプロジェクトの主機能はAIエージェントとの会話(チャット)で、カレンダーや設定、一覧などの画面は比較的静的だといいます。
プロジェクトではDurable Objects・Cron・Browser Renderingといった複数のWorkers機能を同一システムで使う必要があり、著者は画面ごとの要件リストを作ってフレームワーク選定の基準にしました。その結果、Next.jsが優位なのは「リッチなUI」の1点だけで、それが必要なのはチャット画面のみだったと結論づけています。
新構成では、/chat画面のみがReactアイランドとしてWebSocket接続やリッチカード表示を担い、/schedule、/projects、/invoices、/admin、/loginなどの画面はhono/jsx SSRでHTMLのみを返します。hono/jsxではJSXがサーバーサイドテンプレートとして機能しhooksを使わないため、チャット画面以外のクライアントJSはゼロになるといいます。
出典が伝えている要点
- 著者はy43zというシニアエンジニアである
- 著者は社内稼働管理システムをCloudflare Workersで構築するプロジェクトに取り組んでいる
- このプロジェクトの主機能はAIエージェントとの会話(チャット)である
- チャット以外の画面(カレンダー、設定、一覧など)は比較的静的な画面である
- プロジェクトではDurable Objects・Cron・Browser Renderingを同一システムで使用する必要がある
- 著者はNext.js(OpenNext on Workers)からHono + hono/jsx SSR + Reactアイランド構成に切り替えた
- 著者はNext.jsが優位な点は「リッチなUI」の1点のみだと述べている
- 著者はそのリッチなUIが必要なのはチャット画面のみだったと述べている
- 新構成では/chat画面がReactアイランドとしてWebSocket接続やリッチカード表示を行う
- 新構成では/schedule, /projects, /invoices, /admin, /loginなどの画面はhono/jsx SSRでHTMLのみを返す
- hono/jsxではJSXがサーバーサイドテンプレートとして機能し、hooksを使わない
- この構成によりチャット画面以外のクライアントJSがゼロになる
原文より
Next.js が勝っているのは『リッチな UI』の 1 行だけです。そして、その 1 行が効くのはチャット画面だけでした。
出典: zenn.dev