Svelte入門：SvelteKitでの静的サイト生成 -Vol.1-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitでの静的サイト生成について解説しています。

背景
静的サイトジェネレーター
使用方法
1. 解説
事前レンダリングオプション
1. 解説
おわりに

背景

SvelteKitでの静的サイト生成について調査する機会がありましたので、その時の内容を備忘として記事に残しました。

静的サイトジェネレーター

SvelteKitを静的サイトジェネレーター（SSG）として使用するには、adapter-staticを使用します。

これにより、サイト全体が静的ファイルのコレクションとしてプリレンダリングされます。一部のページのみをプリレンダリングし、他のページを動的にサーバーレンダリングしたい場合は、別のアダプターとprerenderオプションを併用する必要があります。

使用方法

npm i -D @sveltejs/adapter-static でインストールし、アダプターを svelte.config.js に追加します。

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

export default {
	kit: {
		adapter: adapter({
			// default options are shown. On some platforms
			// these options are set automatically — see below
			pages: 'build',
			assets: 'build',
			fallback: undefined,
			precompress: false,
			strict: true
		})
	}
};

解説

上記のコードは SvelteKit プロジェクトの設定を定義しており、特に静的サイトジェネレーション（SSG）のための設定を行っています。

このコードの主な要素と目的を解説します：

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

@sveltejs/adapter-static パッケージからアダプターをインポートしています。
このアダプターは、SvelteKit アプリケーションを静的サイトとしてビルドするために使用されます。

export default { ... }

SvelteKit の設定オブジェクトをデフォルトエクスポートとしてエクスポートしています。

kit: { ... }

SvelteKit 固有の設定を含むオブジェクトです。

adapter: adapter({ ... })

静的サイトアダプターを設定しています。
括弧内のオプションで、アダプターの動作をカスタマイズできます。

アダプターオプション：

pages: 'build': 生成されたページの出力ディレクトリを指定します。
assets: 'build': 静的アセットの出力ディレクトリを指定します。
fallback: undefined: SPA モードのフォールバックページを指定します。undefined の場合、フォールバックページは生成されません。
precompress: false: 事前圧縮を無効にします。
strict: true: 厳格モードを有効にします。すべてのページが事前レンダリングされていることを確認します。

この設定の意味と影響：

静的サイト生成：

この設定により、SvelteKit アプリケーションは完全に静的なサイトとしてビルドされます。
サーバーサイドレンダリング（SSR）は行われず、すべてのページは事前にレンダリングされます。

デプロイの柔軟性：

生成された静的ファイルは、Netlify、GitHub Pages、Amazon S3 など、静的ホスティングサービスにデプロイできます。

パフォーマンス：

事前レンダリングされたページは非常に高速にロードされます。
サーバーの負荷が軽減されます。

SEO 対応：

すべてのページが事前レンダリングされるため、SEO に有利です。

注意点と考慮事項：

動的コンテンツの制限：

完全に静的なサイトでは、動的なコンテンツの扱いに制限があります。
APIリクエストなどのクライアントサイドの動的機能は依然として可能です。

ビルド時間：

大規模なサイトでは、すべてのページを事前レンダリングするため、ビルド時間が長くなる可能性があります。

fallback オプション：

SPA モードで運用する場合、fallback オプションを設定して 404 エラーを適切に処理する必要があります。

precompress オプション：

true に設定すると、gzip と brotli で圧縮されたバージョンのアセットも生成されます。

strict オプション：

true に設定されているため、すべてのページが正常に事前レンダリングされない場合、ビルドが失敗します。

この設定は、静的サイトとして配信される SvelteKit アプリケーションに適しています。動的なコンテンツが少なく、高いパフォーマンスと SEO 最適化が必要なプロジェクトに理想的です。ただし、アプリケーションの要件に応じて、これらのオプションを適切に調整する必要があるかもしれません。

事前レンダリングオプション

..そして、ルートレイアウトに事前レンダリングオプションを追加します。

src/routes/+layout.js
// This can be false if you're using a fallback (i.e. SPA mode)
export const prerender = true;

SvelteKitのtrailingSlashオプションを、使用環境に適した設定にする必要があります。ホストが/aへのリクエストに対して/a.htmlをレンダリングしない場合、代わりに/a/index.htmlを作成するために、ルートレイアウトでtrailingSlash: 'always'を設定する必要があります。

解説

上記のコードは、SvelteKit アプリケーションの個別のページまたはレイアウトファイルで使用される設定です。

この設定の主な要素と目的を解説します：

export const prerender = true;

この行は、特定のページまたはレイアウトを事前レンダリング（プリレンダリング）するようSvelteKitに指示します。

コメント:

“This can be false if you’re using a fallback (i.e. SPA mode)”
このコメントは、フォールバック（つまりSPAモード）を使用している場合、この値を false に設定できることを示しています。

この設定の意味と影響：

プリレンダリング：

prerender = true の場合、そのページはビルド時に静的HTMLとして生成されます。
これにより、ページの初期ロード時間が短縮され、SEOが向上します。

静的生成 vs 動的レンダリング：

true: ページは静的に生成され、サーバーサイドレンダリング（SSR）は行われません。
false: ページは動的にレンダリングされるか、クライアントサイドでのみレンダリングされます（SPAモード）。

パフォーマンスとSEO：

プリレンダリングされたページは非常に高速にロードされ、検索エンジンにも好まれます。

ビルド時間：

プリレンダリングを有効にすると、ビルド時間が長くなる可能性があります。特に大規模なサイトの場合はその傾向が顕著です。

注意点と考慮事項：

動的コンテンツ：

プリレンダリングされたページは静的なため、ビルド時に決定できないコンテンツを含むページには適していません。

SPAモード：

シングルページアプリケーション（SPA）として動作させたい場合は、prerender = false を設定し、フォールバックページを使用します。

選択的プリレンダリング：

アプリケーション内の一部のページのみをプリレンダリングすることも可能です。

データ依存：

プリレンダリングするページが外部データに依存する場合、ビルド時にそのデータが利用可能である必要があります。

更新頻度：

プリレンダリングされたページの内容を更新するには、アプリケーションを再ビルドする必要があります。

ルーティング：

動的ルーティングを使用する場合、すべての可能なルートをプリレンダリングするか、一部のルートのみをプリレンダリングするかを慎重に検討する必要があります。

この設定は、SvelteKit アプリケーションの各ページやレイアウトのレンダリング戦略を細かく制御するために重要です。アプリケーションの要件、パフォーマンスの目標、そして更新頻度に基づいて、適切に prerender の値を設定することが重要です。静的なコンテンツが多いサイトでは true が適していますが、高度に動的なアプリケーションや頻繁に更新が必要なページでは false が適している場合があります。

おわりに

今日は、 SvelteKitでの静的サイト生成について解説しました。

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)