SvelteKitBuild and deploy

Single-page apps

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

src/routes/+layout

export const const ssr: falsessr = false;

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

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

使い方

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

svelte.config

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

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

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

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

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

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>

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

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

src/routes/my-prerendered-page/+page

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

Edit this page on GitHub

previous next

Static site generation Cloudflare Pages