Svelte入門：SvelteKitでの Shallow routing -Vol.4-

今日は、SvelteKitでのShallow routingについて解説しています。

背景

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

注意事項

サーバーサイドレンダリング中、$page.stateは常に空のオブジェクトです。ユーザーが最初に訪れるページでも同様です。ユーザーがページをリロードした場合（または別のドキュメントから戻ってきた場合）、ナビゲーションが発生するまで状態は適用されません。

シャロールーティングは、JavaScriptが有効な場合にのみ動作する機能です。使用する際は注意が必要で、JavaScriptが利用できない場合のフォールバック動作を考慮するように心がけてください。

解説

本記事は、SvelteKitのシャロールーティングと状態管理における重要な制限事項について説明しています。主なポイントを詳しく解説します：

1. サーバーサイドレンダリング（SSR）の制限：

• $page.stateは空オブジェクト
• 初期状態では状態が利用不可
• これはSvelteKitの設計上の制限

1. 状態の永続性に関する制限：

• ページリロード時に状態が失われる
• 別ページから戻った際も状態が失われる
• ナビゲーションが必要な理由

1. JavaScript依存性：

• シャロールーティングはJavaScript必須
• プログレッシブエンハンスメントの考慮が重要
• フォールバックの実装が推奨

実装時の推奨プラクティス：

1. フォールバックの実装：

  href="/full-page"
  data-sveltekit-preload-data
  on:click|preventDefault={handleShallowRouting}
>
  <!-- JavaScript無効時は通常のリンクとして機能 -->
  コンテンツを見る
</a>

2. 状態の初期化処理：

<script>
  import { onMount } from 'svelte';
  import { page } from '$app/stores';

  // クライアントサイドでの初期化
  onMount(() => {
    if (shouldHaveState() && !$page.state.someKey) {
      // 必要な初期状態の設定
      replaceState('', { someKey: getInitialState() });
    }
  });
</script>

3. プログレッシブエンハンスメント：

<div class="content">
  {#if $page.state.showEnhanced}
    <!-- JavaScript有効時の拡張機能 -->
    <EnhancedView />
  {:else}
    <!-- 基本的な機能 -->
    <BasicView />
  {/if}
</div>

これらの制限を考慮すべき典型的なケース：

• モーダルダイアログの実装
• 動的なコンテンツ表示
• フォーム状態の管理
• インタラクティブなUI要素

ベストプラクティス：

1. 常にJavaScript無効時の動作を考慮する
2. 重要な機能はフォールバックを用意する
3. ユーザー体験を段階的に向上させる
4. 状態の初期化を適切に行う
5. エラー処理を確実に実装する

おわりに

今日は、 SvelteKitでのShallow routingについて解説しました。