Single-page apps

SvelteKit アプリは、どんな adapter を使っていても、最上位のレイアウト(root layout)で SSR を無効にすることで、完全にクライアントレンダリングされるシングルページアプリ (SPA) にすることができます。

ts
export const ssr = false;

ts
export const ssr = false;

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

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

使い方permalink

npm i -D @sveltejs/adapter-static でインストールし、それから svelte.config.js にこの adapter と以下のオプションを追加します:

ts
import adapter from '@sveltejs/adapter-static';
Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.

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

フォールバックページ(fallback page)とは、SvelteKit がページテンプレート(例: app.html)から作成する HTML ページで、アプリをロードし正しいルート(routes)にナビゲートします。例えば、静的 web ホスティングである Surge では、静的なアセットやプリレンダリングページに対応しないリクエストを処理する 200.html ファイルを追加する必要があります。

ホスティング環境によっては index.html であったり全く別のものであったりします — 使いたいプラットフォームのドキュメントをご参照ください。

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

Apachepermalink

SPA を Apache で実行する場合は、static/.htaccess ファイルを追加し、リクエストをフォールバックページ(fallback page)にルーティングする必要があります:

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

ページを個別にプリレンダリングするpermalink

特定のページをプリレンダリングしたい場合、アプリのその部分だけ ssr と prerender を再び有効にします:

ts
export const prerender = true;
export const ssr = true;

ts
export const prerender = true;
export const ssr = true;