アプリだけじゃない。WEBサイト制作にも最適なSvelteKit

SvelteKitというと、ログイン機能やダッシュボードを持つWebアプリのためのフレームワークというイメージを持たれがちです。しかし実際には、サーバーを持たない静的なコーポレートサイトやオウンドメディアの構築にも十分に向いた選択肢です。この記事自体もSvelteKitで作られたサイト上で公開されています。

サーバーなしで静的出力できる

SvelteKitは@sveltejs/adapter-staticを使うことで、動的なサーバーを一切必要としない、純粋な静的ファイル一式（HTML・CSS・JS）としてビルドできます。

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

const config = {
	kit: {
		adapter: adapter(),
		prerender: {
			entries: ['/', '/about', '/contact']
		}
	}
};

ビルド後に生成されるbuild/ディレクトリの中身は、ただのHTML・CSS・JSファイルです。Node.jsサーバーもSSRランタイムも不要なので、FTPで一般的なレンタルサーバーにアップロードするだけで公開できます。Reactでいうところの静的エクスポートに近い発想ですが、SvelteKitはルーティング・データ取得・レイアウトといった通常のフレームワーク機能をそのまま使いながら、最後の出力段階だけを静的ファイルに切り替えられる点が扱いやすいところです。

リクエストのたびにサーバー側で処理が発生する動的なサイトと違い、静的ファイルはそのまま配信するだけなので表示が軽快になりやすく、Core Web Vitalsのような表示速度の指標でも有利に働きます。表示速度は検索エンジンの評価要素の1つでもあるため、結果としてSEOの面でも有利に働きやすい傾向があります。

Markdownファイルだけでコンテンツ管理ができる

コーポレートサイトやブログでは、記事やお知らせをどう管理するかが悩みどころです。CMSやDBを別途用意すると、その分のインフラ・運用コストがかかります。SvelteKitではimport.meta.globを使うことで、リポジトリ内のMarkdownファイルをそのままコンテンツソースとして扱えます。

const modules = import.meta.glob('/src/content/articles/*.md', {
	eager: true
});

フロントマターでタイトルやカテゴリ、公開日を管理し、本文はMarkdownとして書くだけで、記事一覧・詳細ページ・カテゴリページを組み立てられます。DBを持たないため、認証情報の管理やバックアップといった運用負担が発生しない点も、小規模なコーポレートサイトには適しています。記事の追加・修正はファイルをコミットしてデプロイするだけなので、Gitの履歴がそのまま編集履歴になる副次的なメリットもあります。

向いているケース・向いていないケース

静的出力とMarkdown管理の組み合わせが向いているのは、更新頻度がそこまで高くなく、ユーザーごとに表示内容が変わらないサイトです。コーポレートサイト、オウンドメディア、ドキュメントサイトなどが典型例です。

逆に、ログインしたユーザーごとに異なるデータを表示する、リアルタイムに更新される情報を扱う、といったWebアプリの領域では静的出力は向きません。その場合はSvelteKitのSSR対応のアダプタに切り替えることになりますが、いずれにせよルーティングやデータ取得の書き方自体はほとんど変わらず、アダプタの差し替えだけで対応できるのはSvelteKitの設計上の強みです。

また、Markdownファイルをリポジトリにコミットしてビルド・デプロイする運用が前提になるため、オウンドメディアの記事執筆を外注ライターに任せたい場合には向きません。ブラウザだけで完結する執筆画面を用意して権限を絞って任せたい、外出先やスマホからインターネット経由で手軽に記事を書きたい、といったCMSに近い執筆体験を求める運用には向いておらず、Git・Markdown・デプロイフローに不慣れな執筆者が関わる体制では、別途ヘッドレスCMSを挟むといった工夫が必要になります。

まとめ

SvelteKitは、動的なWebアプリのためだけのフレームワークではありません。静的出力とファイルベースのコンテンツ管理を組み合わせれば、サーバーインフラを持たない軽量なコーポレートサイト・オウンドメディアの構築にも十分に対応できます。「Webアプリ向け」という先入観だけで選択肢から外してしまうのは、もったいない判断です。