SvelteKit で SPA を動かす

root layout で SSR を無効にすればルーティングごとのリクエストは無くなり SPA として動作するが、オススメしない。。

export const ssr = false;

サーバーサイドロジックが無い場合は、adapter-static を使って全体を静的なファイルにして SPA として動作させる。

https://svelte.jp/docs/kit/single-page-apps

デプロイの流れ

1. ビルド設定
   • adapter の fallback オプションに index.html を指定
   • root layout で prerender = false を指定
2. ビルド
3. build フォルダの中に index.html が生成
4. build フォルダの中身を GCS や S3 にアップロード

https://svelte.jp/docs/kit/adapter-static

SPA だとクライアント側でページの内容は書き換わるのでプレレンダリングは不要
→ root layout で prerender = false を指定

GCS に SPA を配置して動かすには、ロードバランサとの連携が必要。
バケット内の単独ファイルにブラウザからアクセスはできるが、html から js を読み込む際にエラーが発生する。

https://cloud.google.com/storage/docs/hosting-static-website?hl=ja

GCS の場合、メインページに index.html を設定しておけばルートへのアクセスでトップページを表示できる。

https://cloud.google.com/storage/docs/hosting-static-website?hl=ja#specialty-pages

load 関数はデフォルトでは、初回はサーバーで動作し以降はブラウザで動作する。
SSRを無効にした場合は、常にクライアントで実行される。
→ SPA でも load 関数使ってデータ取得が可能

https://svelte.jp/docs/kit/load#Universal-vs-server