vite-plugin-ssrt使ってReactとCloudflare WorkersでSSR Streamingする
aiji42Cloudflare Workers micro-frontend のソースを色々弄って、フラグメントをQwikからReactに書き換える過程で、小規模でCloudflare WorkersでSSR StreamingできるReactのビルダーを探していたところ、vite-plugin-ssr を見つけた。
名前の通り、viteでSSRするためのプラグイン。
Vue と React 両方に対応している。
aiji42ドキュメントを読み漁ると、単にSSRできるだけではなくSSGにも対応しているし、ファイルベースルーティングなど、モダンなフロントエンドWFがデフォルトで備えている機能をカバーしていた。
それで、Viteによる高速なビルドができるのであれば使わない手は正直ない。
| Base | Routing | Deploy |
|---|---|---|
 |
 |
 |
aiji42ただのお気持ち
直近のNext.js v13のappDirのアップデートは、中~大規模アプリケーションを運用する上では、(使い方を正しくマスターしさえすれば)利用するベネフィットは十分に得られると思うが、小規模なアプリケーションやプライベートプロダクトやちょっとした素振りをするには、オーバーキルというか理解しなければならないメンタルモデルがでかすぎる印象。
かと言って、素のReactを使うために、react-create-app気にはなれないので、そうなると個人的にはRemixがファーストプライオリティに君臨していたが、今後は、素振りくらいのミニマムアプリケーションを作る上ではこのvite-plugin-ssrがファーストになりそう。
aiji42とりあえず、本来の目的である、Clouflare Workers で React SSR Streaming してみる。
公式のexampleがあるが、不要なライブラリや設定が含まれていて、ピュアな最小構成とは言えないので、参考にしつつ自分でベアボーンを作成してみる。
aiji42必要なライブラリをインストール
yarn add vite-plugin-ssr vite react react-dom @vitejs/plugin-react @cloudflare/kv-asset-handler wrangler`
yarn add -D @cloudflare/workers-types @types/react @types/react-dom typescript
Tailwindにも対応している
yarn add -D autoprefixer postcss tailwindcss