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

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

背景

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

用語集

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

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

ハイドレーション

Svelteコンポーネントは状態を保持し、その状態が更新されるとDOMを更新します。SSR中にデータを取得する場合、デフォルトでSvelteKitはこのデータを保存し、サーバーレンダリングされたHTMLと共にクライアントに送信します。その後、コンポーネントは同じAPIエンドポイントを再度呼び出すことなく、そのデータを使用してクライアント側で初期化できます。Svelteは、DOMが期待される状態にあることを確認し、ハイドレーションと呼ばれるプロセスでイベントリスナーを付加します。コンポーネントが完全にハイドレーションされると、新しく作成されたSvelteコンポーネントと同様にプロパティの変更に反応できるようになります。

SvelteKitでは、デフォルトでページはハイドレーションされますが、csr = falseページオプションでJavaScriptを無効にできます。

解説

1. ハイドレーションのプロセス：

• サーバーでレンダリングされたHTMLとデータをクライアントに送信
• クライアント側でコンポーネントを初期化
• DOMの状態確認とイベントリスナーの追加
• インタラクティブな機能の有効化

1. 重要なポイント：

• APIの重複呼び出しを防ぐ
• パフォーマンスの最適化
• csr = falseでハイドレーションを無効化可能

サンプルコード

SvelteKitでのハイドレーションの基本的な例を示します：

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

// +page.svelte
<script>
  export let data; // サーバーから送られたデータを受け取る

  function handleClick() {
    // クライアントサイドのイベントハンドリング
    console.log('Clicked!');
  }
</script>

<div>
  {#each data.items as item}
    <button on:click={handleClick}>
      {item.name}
    </button>
  {/each}
</div>

解説：

1. サーバーサイド（+page.server.js）:

• データをフェッチ
• クライアントに送信するデータを準備

1. クライアントサイド（+page.svelte）:

• サーバーからのデータを自動的に受け取る
• ボタンクリックなどのイベントリスナーが自動的に付加
• インタラクティブな機能が有効化

ハイドレーションを無効にする場合：

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

おわりに

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