Svelte入門：SvelteKitでのシングルページアプリ

今日は、SvelteKitでのシングルページアプリについて解説しています。

背景

SvelteKitでのシングルページアプリについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

シングルページアプリ

ルート レイアウトで SSR を無効にすると、任意のアダプタを使用する任意の SvelteKit アプリを、完全にクライアント レンダリングされたシングル ページ アプリ (SPA) に変換できます。

// src/routes/+layout.js
export const ssr = false;

ほとんどの場合、これは推奨されません。SEO に悪影響を与え、体感パフォーマンスが低下する傾向があり、JavaScript が失敗したり無効になったりすると、ユーザーがアプリにアクセスできなくなります (これはおそらくあなたが思っているよりも頻繁に発生します)。

サーバー側ロジック (+page.server.js、+layout.server.js、+server.js ファイルなど) がない場合は、adapter-static を使用してフォールバック ページを追加することで SPA を作成できます。

使用方法

npm i -D @sveltejs/adapter-static でインストールし、次のオプションを使用してアダプターを svelte.config.js に追加します。

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

export default {
	kit: {
		adapter: adapter({
			fallback: '200.html' // may differ from host to host
		})
	}
};

fallback ページは、SvelteKitによってあなたのページテンプレート（例えば app.html）から作成されるHTMLページです。このページはアプリをロードし、正しいルートにナビゲートします。例えば、静的ウェブホスティングサービスのSurgeでは、200.html ファイルを追加することができ、これが静的アセットやプリレンダリングされたページに対応しないリクエストを処理します。

一部のホスティングサービスでは、これが index.html であったり、全く別の名前であったりすることがあります。使用するプラットフォームのドキュメントを参照してください。

この fallback ページの仕組みは、シングルページアプリケーション（SPA）の動作を静的ホスティング環境で実現するために重要です。これにより、直接URLを入力したり、ページをリロードしたりした場合でも、適切なルートにナビゲートすることができます。

プラットフォームによって fallback ページの扱いが異なる点に注意が必要です。例えば：

1. GitHub Pages: 通常 404.html を使用します。
2. Surge: 200.html を使用します。
3. Netlify: _redirects ファイルと組み合わせて index.html を使用することが多いです。

適切な fallback ページを設定することで、SPAの利点を維持しながら、静的ホスティングの簡便さを活用することができます。

フォールバック ページは任意のパスの要求に応答するために使用されるため、paths.relative の値に関係なく、常に絶対アセット パス (つまり、. ではなく / で始まる) が含まれることに注意してください。

Apache

Apache で SPA を実行するには、リクエストをフォールバック ページにルーティングするための static/.htaccess ファイルを追加する必要があります。

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteBase /
	RewriteRule ^200\.html$ - [L]
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule . /200.html [L]
</IfModule>

個々のページの事前レンダリング

特定のページを事前レンダリングしたい場合は、アプリのその部分に対してのみ、事前レンダリングとともに SSR を再度有効にすることができます。

// src/routes/my-prerendered-page/+page.js
export const prerender = true;
export const ssr = true;

おわりに

今日は、 SvelteKitでのシングルページアプリについて解説しました。