Build and deploy
Single-page apps
Edit this page on GitHubSvelteKit アプリは、どんな adapter を使っていても、最上位のレイアウト(root layout)で SSR を無効にすることで、完全にクライアントレンダリングされるシングルページアプリ (SPA) にすることができます。
ts
export constssr = false;
ts
export constssr = 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
importCannot find module '@sveltejs/adapter-static' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.adapter from'@sveltejs/adapter-static' ;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 constprerender = true;export constssr = true;
ts
export constprerender = true;export constssr = true;