Single-page apps

フォールバックページ(fallback page) を指定することで、SvelteKit アプリを完全にクライアント側でレンダリングされるシングルページアプリ (SPA) にすることができます。このフォールバックページは、他の方法 (例えばプリレンダされたページを返すなど) で応答できない URL でアクセスされた場合にサーブされます。

SPA mode has a large negative performance impact by forcing multiple network round trips (for the blank HTML document, then for the JavaScript, and then for any data needed for the page) before content can be shown. Unless you are serving the app from a local network (e.g.a mobile app that wraps a locally-served SPA) this will delay startup, especially when considering the latency of mobile devices. It also harms SEO by often causing sites to be downranked for performance (SPAs are much more likely to fail Core Web Vitals), excluding search engines that don’t render JS, and causing your site to receive less frequent updates from those that do. And finally, it makes your app inaccessible to users if JavaScript fails or is disabled (which happens more often than you probably think).

You can avoid these drawbacks by prerendering as many pages as possible when using SPA mode (especially your homepage). If you can prerender all pages, you can simply use static site generation rather than a SPA. Otherwise, you should strongly consider using an adapter which supports server side rendering. SvelteKit has officially supported adapters for various providers with generous free tiers.

Usage

First, disable SSR for the pages you don’t want to prerender. These pages will be served via the fallback page. E.g. to serve all pages via the fallback by default, you can update the root layout as shown below. You should opt back into prerendering individual pages and directories where possible.

export const const ssr: falsessr = false;

サーバーサイドのロジック (すなわち +page.server.js、+layout.server.js、+server.js ファイル) がない場合は、adapter-static を使い フォールバックページ(fallback page) を追加することで SPA を作ることができます。adapter-static を npm i -D @sveltejs/adapter-static でインストールし、それから svelte.config.js にこの adapter と fallback オプションを追加します:

import import adapteradapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const 
const config: {
    kit: {
        adapter: any;
    };
}
@type{import('@sveltejs/kit').Config}config = {
	
kit: {
    adapter: any;
}kit: {
		adapter: anyadapter: import adapteradapter({
			fallback: stringfallback: '200.html' // may differ from host to host
		})
	}
};

export default 
const config: {
    kit: {
        adapter: any;
    };
}
@type{import('@sveltejs/kit').Config}config;

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

ホスティング環境によっては index.html であったり全く別のものであったりします — 使いたいプラットフォームのドキュメントをご参照ください。プリレンダリングとの競合を避けるため、可能な限り index.html は避けることを推奨します。

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

Prerendering individual pages

If you want certain pages to be prerendered, you can re-enable ssr alongside prerender for just those parts of your app:

export const const prerender: trueprerender = true;
export const const ssr: truessr = true;

You won’t need a Node server or server capable of running JavaScript to deploy this page. It will only server render your page while building your project for the purposes of outputting an .html page that can be served from any static web host.

Apache

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>