Svelte入門：用語集 -Vol.4-

用語解説

2025.02.15

この記事は約4分で読めます。

よっしー

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

今日は、SvelteKitにおける用語集について解説しています。

背景
用語集
プリレンダリング
1. 解説
2. サンプルコード
おわりに

背景

SvelteKitにおける用語について調査する機会がありましたので、その時の内容を備忘として記事に残しました。

用語集

SvelteKitのコアは高度に設定可能なレンダリングエンジンを提供します。このセクションではレンダリングについて議論する際に使用される用語を説明します。これらのオプションを設定するためのリファレンスは次回以降の記事に記載していきます。

CSR (クライアントサイドレンダリング)
ハイドレーション
プリレンダリング
ルーティング
SPA (シングルページアプリケーション)
SSG (静的サイト生成)
SSR (サーバーサイドレンダリング)

プリレンダリング

プリレンダリングとは、ビルド時にページの内容を計算し、表示用のHTMLを保存することです。この方法は従来のサーバーレンダリングページと同じ利点がありますが、訪問者ごとにページを再計算する必要がなく、訪問者数が増えてもほぼコストフリーでスケールします。トレードオフとして、ビルドプロセスのコストが高く、プリレンダリングされたコンテンツはアプリケーションの新バージョンのビルドとデプロイによってのみ更新できます。

すべてのページがプリレンダリング可能というわけではありません。基本的なルールは：プリレンダリング可能なコンテンツの場合、直接アクセスする2人のユーザーはサーバーから同じコンテンツを取得する必要があり、ページにアクションを含めることはできません。ただし、すべてのユーザーが同じプリレンダリングされたコンテンツを見る限り、ページのパラメータに基づいて読み込まれるコンテンツもプリレンダリングできます。

プリレンダリングされたページは静的コンテンツに限定されません。ユーザー固有のデータをクライアントサイドでフェッチしてレンダリングすることで、パーソナライズされたページを構築できます。これは、上記で説明したようにそのコンテンツについてSSRを行わないデメリットを受けることを前提としています。

SvelteKitでは、prerenderページオプションとsvelte.config.jsのprerender設定でプリレンダリングを制御できます。

解説

プリレンダリングの利点：

ビルド時に生成するため高速
サーバー負荷が少ない
スケーラビリティが高い

制限事項：

動的なコンテンツには不向き
更新にはリデプロイが必要
ユーザー固有のコンテンツはクライアントサイドで取得必要

ユースケース：

ブログ記事
ドキュメントページ
製品カタログ等の静的コンテンツ

サンプルコード

プリレンダリングの基本的な実装例を示します：

// svelte.config.js
const config = {
  kit: {
    prerender: {
      entries: ['*'], // すべてのルートをプリレンダリング
      default: true   // デフォルトでプリレンダリングを有効化
    }
  }
};

// +page.js
export const prerender = true; // このページをプリレンダリング

// +page.svelte
<script>
  export let data; // ビルド時に生成されたデータ
</script>

<h1>{data.title}</h1>
<div>{data.content}</div>

// 動的コンテンツを含む例
<script>
  let userContent = '';

  onMount(async () => {
    // クライアントサイドでユーザー固有データを取得
    userContent = await fetchUserData();
  });
</script>

<div>{data.staticContent}</div>
<div>{userContent}</div> // 動的コンテンツ

主要ポイント：