SvelteKit は @sveltejs/adapter-static を使って、すべてのページをビルド時にプリレンダリングし、結果を通常のファイルとして書き出せます。Lobsite はそのファイルをホストします。静的アダプターでビルドして npx lobsite を実行すると、HTTPS 対応の *.lobsite.app アドレスでサイトが公開されます。このページは完全にプリレンダリングされたサイトについて説明します。サーバールートとフォームアクションには、サーバーで SvelteKit を実行するホストが必要です。
仕組み
- 静的アダプターに切り替え、すべてのページをプリレンダリングして（下記参照）、
npm run buildを実行します。サイトはbuild/に出力されます。 - プロジェクトで
npx lobsiteを実行します。デプロイされるのはbuild/で、static/や.svelte-kit/ではありません。最初のデプロイにアカウントは不要で、6 時間有効です。 - 取得リンクから無料アカウントにサイトを残します。その後は
npm run build && npx lobsiteで同じアドレスが更新されます。
adapter-static とプリレンダリング
// svelte.config.js
import adapter from "@sveltejs/adapter-static";
export default {
kit: { adapter: adapter() },
};
// src/routes/+layout.js
export const prerender = true;
- ルートレイアウトの
prerender = trueにより、すべてのページがビルド時にレンダリングされます。プリレンダリングできないページがあるとビルドが失敗してそのページを示すため、壊れたものはデプロイされません。 fallback: "200.html"はプリレンダリングできないページ向けです。SvelteKit が200.htmlシェルを書き出し、Lobsite はファイルではないパスにそれを配信するため、それらのページはブラウザでレンダリングされます。検索エンジンと初回読み込みには、引き続きプリレンダリングされたページのほうが適しています。trailingSlashはデフォルトのままでかまいません。/aboutはabout.htmlとして書き出され、/aboutで配信されます。
ビルド時に実行されるもの、できないもの
+page.server.js のものを含む load 関数は、ページのプリレンダリング時にビルド中に実行されるため、ファイルや API のデータが HTML に組み込まれます。動的ルートはページのリンクをたどって検出されます。リンクされていないものは prerender.entries に記載してください。サーバーなしでは動作しないものは、フォームアクション、プリレンダリングされた GET 以外の +server.js エンドポイント、リクエストごとに実行されるフック、Cookie の読み取りです。お問い合わせフォームは、フォームアクションの代わりに /_lobsite/forms/contact に送信してください。フォームをご覧ください。
ファイルはハッシュで保存されます。変更のないサイトを再デプロイしてもアップロードは 0 バイトです。
公開前にプレビューできます。リダイレクトも含めてワンクリックでロールバックできます。
すべてのサイトに、最初のデプロイから HTTPS 対応の *.lobsite.app アドレスが付きます。
フォームの送信先を /_lobsite/forms/contact にするだけです。スパムフィルターも含まれます。
リダイレクト、ヘッダー、フォームは lobsite.toml に記述し、デプロイごとに一緒に反映されます。
すべての制限は公開されており、すべてのエラーが次にすべきことを教えてくれます。
SvelteKit ホストの比較
| Lobsite | Vercel | Netlify | Cloudflare Pages | |
|---|---|---|---|---|
プリレンダリングサイト（adapter-static） |
はい | はい | はい | はい |
| サーバーレンダリング、フォームアクション | いいえ | はい | はい | はい |
| サーバーでのビルド | いいえ: build/ をデプロイ |
はい | はい | はい |
| 最初のデプロイ前のアカウント | 不要: 6 時間公開、その後無料で残せる | 必要 | 必要 | 必要 |
| バックエンド不要のフォーム | はい（サイトをアカウントに残した後） | いいえ | はい | いいえ |
| カスタムドメイン | はい、無料 | はい | はい | はい |
アプリがリクエスト時にページをレンダリングするなら、それを実行するホストのアダプターを使ってください。マーケティングサイト、ブログ、ドキュメントのようにすべてのページをプリレンダリングできるなら、Lobsite はコマンド 1 つでホストし、ビルドで変更されたファイルのみをアップロードします。
よくある質問
Lobsite にはどの SvelteKit アダプターを使うべきですか？
すべてのページをプリレンダリングした @sveltejs/adapter-static です。adapter-auto やプラットフォーム用アダプターはサーバーや関数向けにビルドしますが、Lobsite はそれらを実行しません。
フォールバックページのある SvelteKit SPA はここで動作しますか？
はい。adapter({ fallback: "200.html" }) を設定してください。Lobsite はファイルではないすべてのパスにステータス 200 で 200.html を配信し、SvelteKit のルーターがブラウザでページをレンダリングします。プリレンダリングされたページはそのまま配信されます。
SvelteKit のビルドがプリレンダリングエラーで失敗したのはなぜですか？
ページをビルド時にレンダリングできませんでした。多くの場合、url.searchParams、Cookie、フォームアクションを読み取っていることが原因です。その処理をブラウザに移すか、ビルド時に利用できるデータのみを使う load 関数に移してください。
プリレンダリング後も SvelteKit のページ遷移は動作しますか？
はい。プリレンダリングされたページは SvelteKit のクライアントを読み込み、最初のページの後はナビゲーションを引き継ぐため、リンクは完全な再読み込みなしでページを切り替えます。