Svelte-kitでSPAモードを有効にする

環境

• svelte-kit: 1.0.0-next.99
• adapter-static: 1.0.0-next.8

TL;DR

adapter-staticを使います。

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
export default {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        adapter: adapter({
            fallback: 'index.html',
        }),
        ssr: false,
    },
};

Svelte-kit

Svelte向けのNext.js的なフレームワークは、これまではSapperなるものが主流だったようですが、Svelte-kitなるものに置き換えようと開発中のようです、今はベータ版という位置付け。

このSvelte-kitはデフォルトだとSSRになる訳ですが、シンプルにSPAでやりたい。しかし出始めだけあって情報がなかなかない。うまくいかなくても仕様なのか不具合なのかわからない（でもそれも面白い）。とりあえずStaticなビルドが出来るようになったのでメモしておきます。

Svelte-kitのadapter

Svelte-kitにはadapterなる概念があり、ホスティング環境に応じてこのadapterを切り替えてビルドすれば、ソースは変えずに複数の環境に対応出来る、という事らしいです（サーバーに依存するSSRならではの対応でしょうか）。

adapterはVercelやNetlifyなどのホスティングサービスから、単純にNode.jsサーバー向けのものなど様々あり、そのなかにstaticなるadapterがあります。名前のとおり静的ホスティング向けのものです。

adapter-static

https://github.com/sveltejs/kit/tree/master/packages/adapter-static