Sveltekitのadapter-staticについて
Sveltekitにはadapterという機能があり、
ビルドの生成物を制御できる
adapter-staticはそのひとつ
- 主な機能は以下の二つ
- 全てのページをprerenderingして静的サイトして出力してくれる
- SPA用のfallback HTMLを作成して、SPAとして出力してくれる
静的サイトの出力(SSG)
fallbackを指定しないと全てのページをprerenderingしようとする
実際にprerenderingされるのは以下のページ
- routes/index.svelte, routes/hoge.svelte など page paramsを使っていないページ
- 上記ページから
<a>でリンクが貼られているroutes/posts/[id].svelteのようなpage paramsありのページ- prerender.crawl が有効になっている必要がある (デフォルトで有効)
-
<button on:click={() => goto('/hoge')}>みたいなProgramaticに遷移させるのはだめ
- svelte.config.jsonのprerender.pages で指定されているページ
- これがあると、指定されたページのみprerenderingされる
SPAとしての出力
adapter: adapter({ fallback: '200.html'})
のように fallback に htmlファイル名を指定すると、SPAモードでの出力になる
挙動が変わるのは以下の点
- prerenderingされるページは一部指定したところのみ
-
<script context="module">export const prerender=true;</script>を指定したRoute Paramsがないページ - prender.pages での指定は無視される
-
- 生成されるHTMLで
spa: trueが指定されている-
<script context="module">内でのloadがクライアント側実行されるようになる - ssr: false を指定したときとおそらく同じ
-
READMEで 200.html になっているのは Surge という Hostingサービスを意識しているみたい？
これが実装されるようになった元のissueは多分こちら
ssr: false を指定したときの挙動
fallbackを指定せずに sveltekitのssrを無効にしたときもSPAモードで出力される
ただしprerenderingできるところはしようとする
実際にprerenderingされるのは以下のページ
- routes/index.svelte, routes/hoge.svelte など page paramsを使っていないページ
- svelte.config.jsonのprerender.pages で指定されているページ
- これがあると、指定されたページのみprerenderingされる
たとえリンクがあったとしても routes/posts/[id].svelteみたいなページはprerenderingされなかった