SPA開発をNext.js(Static Site Generation[SSG])からReact+Vite環境に乗り換える

現状のSPA開発

• フレームワーク：Next.js（Pages Router)
• 開発サービス：BtoB向けSaaS
• フロントインフラ：AWS S3
  • Next.jsのStatic Exportsによりルートごとに静的ファイルを生成してホスティング
    • 全てがビルド時に静的に決まるわけではないので、動的に変わるところはCSR(Client Side Rendering）で画面更新頑張る
  • 初期ロード時にファイルをS3から取得して、それ以降クライアントサイドで画面遷移

携わるシステム開発が基本フロント用のNode.jsサーバーを管理しない方針で、Node.jsサーバーありきのフレームワーク(Next.jsやRemixなど)はあっていない気がするので、フレームワークを使わない道を模索してみた。

こんなSPA開発環境が欲しい

• ファイルベースルーティングできること
• エラーハンドリングできること
  • 独自レイアウトの404ページが表示できる
  • 独自レイアウトのランタイムエラーページが表示できる
• SSG(Static Site Generation)できること
  • ルートごとに静的ファイルを出力できること
    • フロント資材は静的ファイルをホスティングサービスに乗せるだけにしたい

Next.jsで使っていた機能といえばこのくらいなので、これが他のライブラリで実現できるのであればNext.jsを剥がしたSPA環境ができそう。

結論

機能	機能を提供するライブラリ
ファイルベースルーティング	TanStack Router
エラーハンドリング	TanStack Router
SSG(Static Site Generation)	Vike（Pre-Rendering)（これ使うならTanStack Routerではなく、Vikeのrouting機構に乗らないといけない）

ファイルベースルーティングとエラーハンドリングはTanStack Routerで代用できそう。

SSGについてはさくっとできそうな方法が見つからなかった。VikeのPre-Renderingを使えばできなくはない気はするが、SSGのために結構手間が増えそうなので微妙と判断。（Next.jsだとnext.config.jsにoutput: 'export'を加えるだけ）ってことでSSGは厳しそうなので、vite buildで出力されるindex.htmlとjs,css等をS3にホスティングする。ただ、rootより深いroutesを含まないので、CloudFrontやS3で設定を追加して回避しようと思う（エラーの場合に/index.htmlにリダイレクトするやつ）。

おまけ（感想）

• TanStack Routerよさげ
  • 認証済みでないとみれないページの実装がしやすくなる（未認証の場合はログインページにリダイレクトみたいな処理）
  • Strict Navigation
    • とかで画面遷移するときにコード補完してくれる
    • path params、search paramsも型安全に扱える
  • Structural Sharing
    • 共通レイアウトが組みやすい
    • Next.js App routerのLayoutと同じ？（厳密にはちょっと違うかも）
    • App Routerにはしたくないけど、Layoutの仕組みは欲しかったので嬉しい
• 私みたいな人のためにRemix SPAが出たみたいだけど、2024年2月現在experimentalなのと、SSGは未対応みたい