Svelte入門：SvelteKitでのページオプション -Vol.4-

今日は、SvelteKitでのページオプションについて解説しています。

背景

SvelteKitでのページオプションについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

SvelteKitでのページオプションについて

SvelteKitは基本的に、コンポーネントをまずサーバー上でレンダリング（またはプリレンダリング）し、HTMLとしてクライアントに送信します。その後、ブラウザ上で再度レンダリングして、「ハイドレーション」と呼ばれるプロセスで対話性を持たせます。そのため、コンポーネントが両方の環境で動作することを確認する必要があります。その後、SvelteKitは後続のナビゲーションを制御する「ルーター」を初期化します。

これらの動作は、+page.jsや+page.server.jsからオプションをエクスポートすることで、ページごとに制御できます。また、共有の+layout.jsや+layout.server.jsを使用して、ページのグループに対して制御することもできます。アプリ全体に対するオプションを定義するには、ルートレイアウトからエクスポートします。

これらのオプションをアプリの異なる領域で組み合わせることができます。例えば、マーケティングページをプリレンダリングして最高速度を実現し、動的ページをサーバーレンダリングしてSEOとアクセシビリティを確保し、管理セクションをクライアントのみでレンダリングしてSPAにすることができます。これにより、SvelteKitは非常に多用途になります。

末尾のスラッシュパーマリンク

1. SvelteKitのデフォルト動作：
   • URLの末尾のスラッシュを削除します。
   • 例：/about/にアクセスすると、/aboutにリダイレクトされます。
2. 動作変更のオプション：
   • trailingSlashオプションを使用して、この動作を変更できます。
3. trailingSlashオプションの設定値：
   • 'never'：デフォルト設定。末尾のスラッシュを削除します。
   • 'always'：常に末尾にスラッシュを付けます。
   • 'ignore'：末尾のスラッシュの有無を無視します。

SvelteKitにおけるURL構造の処理方法と、それをカスタマイズするためのオプションを提供しています。開発者はこの設定を使用して、プロジェクトの要件やSEOの考慮事項に基づいてURLの形式を制御できます。末尾のスラッシュの扱いは、ウェブサイトの一貫性や検索エンジンの最適化に影響を与える可能性があるため、プロジェクトの要件に応じて適切に設定することが重要です。

他のページ オプションと同様に、この値を +layout.js または +layout.server.js からエクスポートすると、すべての子ページに適用されます。 +server.js ファイルから構成をエクスポートすることもできます。

// src/routes/+layout.js
export const trailingSlash = 'always';

このオプションはプリレンダリングにも影響します。 trailingSlash が常に指定されている場合、/about のようなルートは about/index.html ファイルを作成します。それ以外の場合は、静的 Web サーバーの規則を反映して about.html が作成されます。

末尾のスラッシュを無視することはお勧めできません。相対パスのセマンティクスは 2 つの場合で異なり (/x からの ./y は /y ですが、/x/ からの ./y は /x/y です)、/x と /x/ は次のように扱われます。 SEO に有害な URL を分離します。

config

1. SvelteKitのアダプター概念：
   • アダプターを使用することで、SvelteKitは様々なプラットフォームで動作可能です。
2. プラットフォーム固有の設定：
   • 各プラットフォームには、デプロイメントをさらに調整するための特定の設定がある場合があります。
3. 具体例（Vercelの場合）：
   • アプリケーションの一部をエッジ環境にデプロイし、他の部分をサーバーレス環境にデプロイするような選択が可能です。

アダプター機能により、開発者は様々なホスティング環境やクラウドプラットフォームでSvelteKitアプリケーションを展開できます。さらに、各プラットフォームの特性を活かした最適化や設定が可能であることを示しています。

これにより、開発者はプロジェクトの要件やパフォーマンス目標に応じて、最適なデプロイメント戦略を選択し、実装することができます。例えば、Vercelのような高度なプラットフォームでは、アプリケーションの異なる部分を異なる実行環境に配置することで、パフォーマンスと費用対効果のバランスを取ることができます。

configは、トップレベルにキーと値のペアを持つオブジェクトです。それ以上の具体的な形状は、使用しているアダプターによって異なります。すべてのアダプターは、型安全性のためにConfigインターフェースをインポート用に提供するべきです。詳細については、使用しているアダプターのドキュメントを参照してください。

// src/routes/+page.js
/** @type {import('some-adapter').Config} */
export const config = {
	runtime: 'edge'
};

configオブジェクトは、トップレベルでマージされます（より深いレベルではマージされません）。これは、上位の+layout.jsにある値の一部のみを上書きしたい場合、+page.jsですべての値を繰り返す必要がないことを意味します。例えば、このレイアウト設定では…

// src/routes/+layout.js
export const config = {
	runtime: 'edge',
	regions: 'all',
	foo: {
		bar: true
	}
}

…このページ設定によって上書きされます…

// src/routes/+page.js
export const config = {
	regions: ['us1', 'us2'],
	foo: {
		baz: true
	}
}

…そのページの構成値は { runtime: ‘edge’,regions: [‘us1’, ‘us2’], foo: { baz: true } } になります。

おわりに

今日は、 SvelteKitでのページオプションについて解説しました。