SolidStart が『次世代Reactの選択肢』として浮上
SolidStartはReact代替のSolid.jsチームが開発するフルスタックFWで、SolidJS独特の『コンパイル時リアクティビティ』(Virtual DOMなし・細粒度更新)の特性を活かし、Next.jsよりさらに小さなバンドル・速い実行を実現します。2025年に1.0安定版がリリース、2026年現在AI/SaaSスタートアップでの本番採用が始まっています。
採用すべき5つのシグナル
- React Server Componentsの複雑性に疲れた
- Next.jsより軽量・高速なFWが必要
- SolidJSの細粒度リアクティビティが好き
- 新規プロジェクトで先進的選択肢を試したい
- React知識を別の選択肢に応用したい
主要機能
- File-based Routing:
routes/ディレクトリで自動 - Server Functions: 型安全なServer-side関数
- Streaming SSR: Suspense統合
- Islands Architecture: 部分的なクライアントハイドレーション
- Deployment: Vercel/Netlify/Cloudflare/Node等多数対応
- SolidUI Libraries: 各種UIライブラリ対応
Next.js/Remix/SolidStart比較
Next.js: シェア最大・React Server Components・Vercel最適化。
Remix(React Router v7): Web標準志向・Loaderパターン。
TanStack Start: TS型完全・新興。
SolidStart: 軽量・速い・SolidJS・新興。
使い分け: 安定実績Next.js・軽量高速SolidStart・TS型最強TanStack Start。
SolidJSのリアクティビティの利点
- Virtual DOMなし・直接DOM操作で高速
- 細粒度更新(変更箇所のみ再評価)
- useEffect不要・依存配列ミスがない
- バンドルサイズが小さい(数KB)
- JSX互換でReact経験が活きる
実装パターン
(1) セットアップ: npm create solidでひな形
(2) Route: routes/index.tsxでホームページ
(3) Server Function: 'use server'ディレクティブ
(4) Signal/Effect: const [count, setCount] = createSignal(0)
(5) デプロイ: Vercel/Netlify/Cloudflareなどに対応
本番採用の判断基準
- 本番実績: 2025年GA・スタートアップ採用開始
- エコシステム: Next.js比1/3〜1/5のライブラリ数
- SolidJS経験: React経験者は2〜3週間で慣れる
- SEO/SSR: Next.js同等の品質
- パフォーマンス: バンドル・実行速度ともに優位
採用しない方が良いケース
- React生態系ライブラリ依存度高い
- 大規模・安定実績重視
- SEO最適化を極限まで求める(Next.jsの方が経験豊富)
- チームがNext.js慣れている
- React Native等のモバイル共有が必要
実装で詰まる3つの落とし穴
- SolidJSリアクティビティの違い: useStateと違うSignalの挙動
- JSX変換: Reactと微妙に異なるJSX
- SSR/CSR切替: ページ単位の戦略設計
30日学習プラン
- 1週目: SolidJS基礎・Signal/Effect/Computed
- 2週目: SolidStart基本・ファイルルーティング・Server Functions
- 3週目: SSR・データフェッチ・Suspense
- 4週目: 本番デプロイ・パフォーマンス計測
関連リンク
Next.jsは Next.js深掘り、TanStack Startは TanStack Start深掘り、Astroは Astro Server Islands深掘り を参照してください。SolidJSは Solid.js深掘り もどうぞ。