SvelteKit は『Svelte の標準フレームワーク』
SvelteKit は Svelte 公式のメタフレームワークで、SSR/SSG/SPA を1つで扱えます。本記事では編集部の視点で、深掘りした使い方を公開情報をもとに整理します。Svelte 5 実践 もご参考に。
主要な機能
(1) ファイルベースルーティング。(2) Load 関数：データ取得。(3) Form Actions：書込み処理。(4) Server Routes：API endpoint。(5) Adapter：複数ホスティング対応。
Load 関数
(1) +page.server.tsでサーバー側。(2) +page.tsでユニバーサル。(3) parent()：親 layout のデータ。(4) depends()：再 load 制御。(5) invalidate()：強制再取得。
Form Actions
(1) +page.server.ts の actions。(2) method=POST フォームから呼出。(3) Progressive Enhancement。(4) error/redirect：制御。(5) useEnhance：UX向上。Remix 実践 もご参考に。
Server Routes (API)
(1) +server.tsでRESTful。(2) GET/POST/PUT/DELETE関数。(3) RequestEvent：ハンドラ引数。(4) Webhook 受信。(5) SSE/streaming対応。Webhook 設計 もご参考に。
Adapter システム
(1) adapter-vercel。(2) adapter-netlify。(3) adapter-cloudflare：Workers/Pages。(4) adapter-node：セルフホスト。(5) adapter-static：SSG。CDN/Edge 実践 もご参考に。
パフォーマンス特性
(1) 初回ロード軽量。(2) Hydration 高速。(3) Code Splitting 自動。(4) Preload Hints。(5) SSR レイテンシ最小。Web Vitals 最適化 もご参考に。
採用判断
(1) 個人開発・小規模：強い。(2) 採用市場：限定的(公開情報をもとに)。(3) パフォーマンス必須：価値大。(4) 大規模採用：React/Next.js 安全。(5) 育成枠の検討。
失敗しがちなパターン
(1) Load 多重定義：実行順序混乱。(2) +page.svelte の重い処理。(3) Adapter 選択ミス。(4) Form Action の認証忘れ。(5) SSR で window 参照。対策は、(1)責任分割、(2)server load 移動、(3)用途確認、(4)Hook 統一、(5)browser check、です。