Features

この構成の主要ポイント

TanStack Start × GitHub Pages の SPA + プリレンダリング構成が提供する機能と設定を紹介します。

型安全なルーティング

TanStack Router のファイルベースルーティングと型推論により、パス・パラメータ・検索クエリ・ローダーまで一貫した型安全性を確保。リファクタリング時の破壊的変更をビルド前に検出できます。

SSR を必要としない LP では、SPA モードを有効化して shell HTML を生成。クライアントでハイドレーションされたルーターが高速な画面遷移を担います。

ビルド時に主要ルートを HTML 化し、初回アクセスでもコンテンツが即座に表示されます。SEO とキャッシュ効率も向上します。

サブディレクトリ配下へデプロイするため vite.config.ts の base を /tanstack-start-gh-pages/ に設定。本番ビルドでは BASE_PATH で /<リポジトリ名>/tanstack-start-gh-pages/ へ基準パスを解決します。

GitHub Pages は動的フォールバック非対応のため、_shell.html を 404.html として配置。未到達パスでも SPA が正しいルートへ遷移します。

ルート定義とサーバー境界を維持したまま、将来は Cloudflare / Netlify / Node.js などへスムーズに移行できます。

リポジトリルートに配置する GitHub Actions が、ビルド → 404.html 生成 → gh-pages ブランチへ展開を自動化します。