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

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

背景

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

用語集

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

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

ルーティング

デフォルトでは、新しいページに移動する際（リンクのクリックやブラウザの進む/戻るボタンの使用時）、SvelteKitはブラウザが目的のページのサーバーにリクエストを送信するのを防ぎ、代わりにナビゲーションを処理します。SvelteKitは新しいページのコンポーネントをレンダリングしてクライアント側で表示内容を更新し、必要なAPIエンドポイントを呼び出すことができます。このナビゲーション試行に応じてクライアント側でページを更新するプロセスを、クライアントサイドルーティングと呼びます。

SvelteKitでは、クライアントサイドルーティングがデフォルトで使用されますが、data-sveltekit-reloadで無効にできます。

解説

1. デフォルトの動作：

• 通常のページ遷移をインターセプト
• サーバーへの不要なリクエストを防止
• クライアント側でコンポーネントを更新

1. 利点：

• 高速なページ遷移
• サーバー負荷の軽減
• スムーズなユーザー体験

1. 制御：

• デフォルトで有効
• data-sveltekit-reloadで通常のページ遷移に戻せる

サンプルコード

基本的なルーティングの実装例を示します：

// src/routes/+layout.svelte
<script>
  import { page } from '$app/stores';
</script>

<nav>
  <!-- 通常のクライアントサイドルーティング -->
  <a href="/about">About</a>

  <!-- 従来のページ遷移を強制 -->
  <a href="/login" data-sveltekit-reload>Login</a>
</nav>

<!-- プログラムによるナビゲーション -->
<script>
  import { goto } from '$app/navigation';

  async function handleClick() {
    await goto('/dashboard');
  }
</script>

// src/routes/+page.svelte
<script>
  // ページパラメータの取得
  export let data;
</script>

<h1>Welcome to {data.title}</h1>

解説：

1. 通常のリンク：

• <a href>で自動的にクライアントサイドルーティング
• スムーズな遷移を実現

1. 特別なケース：

• data-sveltekit-reloadで通常の遷移
• セキュリティが必要なページなどで使用

1. プログラム的なナビゲーション：

• goto関数でJavaScriptから遷移
• 条件付きのリダイレクトなどに使用

おわりに

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