Open5

vite-plugin-ssrt使ってReactとCloudflare WorkersでSSR Streamingする

aiji42aiji42

Cloudflare Workers micro-frontend のソースを色々弄って、フラグメントをQwikからReactに書き換える過程で、小規模でCloudflare WorkersでSSR StreamingできるReactのビルダーを探していたところ、vite-plugin-ssr を見つけた。
名前の通り、viteでSSRするためのプラグイン。

https://vite-plugin-ssr.com/

Vue と React 両方に対応している。

aiji42aiji42

ドキュメントを読み漁ると、単にSSRできるだけではなくSSGにも対応しているし、ファイルベースルーティングなど、モダンなフロントエンドWFがデフォルトで備えている機能をカバーしていた。
それで、Viteによる高速なビルドができるのであれば使わない手は正直ない。

Base Routing Deploy
aiji42aiji42
ただのお気持ち

直近のNext.js v13のappDirのアップデートは、中~大規模アプリケーションを運用する上では、(使い方を正しくマスターしさえすれば)利用するベネフィットは十分に得られると思うが、小規模なアプリケーションやプライベートプロダクトやちょっとした素振りをするには、オーバーキルというか理解しなければならないメンタルモデルがでかすぎる印象。

かと言って、素のReactを使うために、react-create-app気にはなれないので、そうなると個人的にはRemixがファーストプライオリティに君臨していたが、今後は、素振りくらいのミニマムアプリケーションを作る上ではこのvite-plugin-ssrがファーストになりそう。

aiji42aiji42

とりあえず、本来の目的である、Clouflare Workers で React SSR Streaming してみる。

公式のexampleがあるが、不要なライブラリや設定が含まれていて、ピュアな最小構成とは言えないので、参考にしつつ自分でベアボーンを作成してみる。

aiji42aiji42

必要なライブラリをインストール

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にも対応している
https://vite-plugin-ssr.com/tailwind-css#page-content

yarn add -D autoprefixer postcss tailwindcss