SvelteKitビルドとデプロイ

シングルページアプリ

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

src/routes/+layout

export const const ssr: falsessr = 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

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 ページは、ページテンプレート (例: app.html) から SvelteKit によって作成された HTML ページであり、アプリを読み込んで正しいルートにナビゲートします。たとえば、Surge は、静的 Web ホストであり、静的アセットやプリレンダリングされたページに対応しないリクエストを処理する 200.html ファイルを追加できます。

一部のホストでは、index.html またはまったく別のものになる場合があります。プラットフォームのドキュメントを参照してください。

フォールバックページには、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とprerenderを再度有効にすることができます

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

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

このページをGitHubで編集

前へ次へ

静的サイト生成 Cloudflare Pages