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

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

背景

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

用語集

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

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

SPA (シングルページアプリケーション)

シングルページアプリケーションとは、サーバーへのすべてのリクエストが単一のHTMLファイルを読み込み、その後リクエストされたURLに基づいてクライアントサイドで要求されたコンテンツをレンダリングするアプリケーションです。すべてのナビゲーションはクライアントサイドルーティングと呼ばれるプロセスでクライアント側で処理され、ページごとのコンテンツが更新され、共通のレイアウト要素は大きく変更されません。SPAはSSRを提供せず、上記で説明した短所があります。ただし、SEOが重要でなく、ユーザーが一貫したコンピューティング環境からアクセスすることが分かっているログイン後の複雑なビジネスアプリケーションなど、これらの短所の影響が大きくないアプリケーションもあります。

SvelteKitでは、adapter-staticを使用してSPAを構築できます。

解説

1. SPAの特徴：

• 単一HTMLファイル
• クライアントサイドでのコンテンツ更新
• 共通レイアウトの維持

1. メリット：

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

1. デメリット：

• SEOに不利
• 初期ロードが遅い
• JavaScriptが必須

1. 適したユースケース：

• 管理画面
• ダッシュボード
• ログイン後のアプリケーション

サンプル

SPAの基本的な実装例：

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

export default {
  kit: {
    adapter: adapter({
      fallback: 'index.html' // すべてのルートを index.html にリダイレクト
    })
  }
};

// src/routes/+layout.js
export const ssr = false; // SSRを無効化

// src/routes/+layout.svelte
<script>
  import { onMount } from 'svelte';
  import Navigation from '$lib/Navigation.svelte';
</script>

<Navigation />
<main>
  <slot /> <!-- ページコンテンツがここに挿入される -->
</main>

// src/lib/Navigation.svelte
<nav>
  <a href="/">Home</a>
  <a href="/dashboard">Dashboard</a>
  <a href="/profile">Profile</a>
</nav>

重要ポイント：

• adapter-staticでSPA設定
• ssr = falseでサーバーサイドレンダリング無効化
• 共通レイアウトの維持
• クライアントサイドでのルーティング処理

おわりに

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