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

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

背景

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

用語集

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

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

CSR

クライアントサイドレンダリング(CSR)は、JavaScriptを使用してWebブラウザでページコンテンツを生成することです。
SvelteKitでは、CSRがデフォルトで使用されますが、csr = falseというページオプションでJavaScriptを無効にできます。

解説

• CSRはブラウザ上でJavaScriptを実行してコンテンツを描画
• SvelteKitではデフォルトでCSRが有効
• csr = falseで無効化可能

これは特にSPAやインタラクティブなWebアプリケーションで一般的な手法です。

サンプルコード

SvelteKitでのCSRの基本的な使用例を示します：

// +page.js
export const csr = true; // デフォルト値

// +page.svelte
<script>
  import { onMount } from 'svelte';
  let data = [];

  onMount(async () => {
    // ブラウザでのみ実行される
    const response = await fetch('/api/data');
    data = await response.json();
  });
</script>

{#each data as item}
  <div>{item.name}</div>
{/each}

CSRを無効にする例：

// +page.js
export const csr = false;

// +page.server.js
export async function load() {
  // サーバーサイドでデータを取得
  return {
    data: await fetchData()
  };
}

サンプルコードの主要なポイントを解説します：

1. CSR有効の場合（デフォルト）:

export const csr = true;

• onMountフックを使用して、ブラウザでのみデータ取得を実行
• クライアント側でDOMを動的に更新
• インタラクティブな機能が利用可能

1. CSR無効の場合:

export const csr = false;

• JavaScriptの実行が無効
• サーバーサイドでデータを取得（+page.server.js）
• 静的なHTMLとして配信
• インタラクティブ機能は制限される

使い分け：

• CSR有効：動的なユーザーインターフェースが必要な場合
• CSR無効：静的なコンテンツ表示や、JavaScriptを必要としない場合

おわりに

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