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

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

背景

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

用語集

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

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

SSG (静的サイト生成)

静的サイト生成は、すべてのページがプリレンダリングされるサイトを指す用語です。SvelteKitは一部のツールのように静的サイト生成のみを目的として構築されていないため、非常に多数のページを効率的にレンダリングする面では、その目的のために特化して構築されたツールほどスケールしない可能性があります。ただし、ほとんどの専用SSGとは対照的に、SvelteKitは異なるページで異なるレンダリングタイプを組み合わせることができます。サイトを完全にプリレンダリングする利点の1つは、SSRを実行するためのサーバーを維持または支払う必要がないことです。生成後、サイトはCDNから配信でき、優れた「最初のバイトまでの時間」のパフォーマンスを実現できます。この配信モデルはよくJAMstackと呼ばれます。

SvelteKitでは、adapter-staticを使用するか、prerenderページオプションまたはsvelte.config.jsのprerender設定を使用してすべてのページをプリレンダリングするように設定することで、静的サイト生成を行うことができます。

解説

主要ポイント：

1. 全ページがプリレンダリング
2. 異なるレンダリング方式の混在が可能
3. サーバー維持コストの削減
4. CDN配信による高速化
5. JAMstackアーキテクチャとの親和性

サンプルコード

SSGの基本的な実装例：

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

export default {
  kit: {
    adapter: adapter(),
    prerender: {
      entries: ['*']  // すべてのページをプリレンダリング
    }
  }
};

// src/routes/blog/+page.js
export const prerender = true;

// src/routes/blog/+page.server.js
export async function load() {
  const posts = await fetchBlogPosts();
  return { posts };
}

// src/routes/blog/+page.svelte
<script>
  export let data;
  const { posts } = data;
</script>

{#each posts as post}
  <article>
    <h2>{post.title}</h2>
    <p>{post.excerpt}</p>
  </article>
{/each}

解説：

1. 設定：

• adapter-staticで静的サイト生成
• prerender: trueで全ページプリレンダリング

1. データフェッチ：

• ビルド時にデータ取得
• 静的HTMLとして出力

1. 利用シーン：

• ブログサイト
• ドキュメントサイト
• マーケティングサイト

おわりに

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