SPAモードとデータ無効化

// +layout.ts または +page.ts
export const ssr = false;    // サーバーサイドレンダリングを無効化
export const csr = true;      // クライアントサイドレンダリングは有効（デフォルト）
export const prerender = false; // プリレンダリングも無効化

// この設定により
// 1. Server Load（+page.server.ts）は実行されない
// 2. Universal Load（+page.ts）はクライアントでのみ実行
// 3. 初回アクセスでも空のHTMLシェルのみ返される

// SPAモードのデータフロー
// 1. ブラウザがページにアクセス
// 2. サーバーから空のHTMLシェル + JSバンドル
// 3. JavaScriptが実行される
// 4. クライアントでLoad関数実行
// 5. APIからデータ取得
// 6. DOMを構築・表示

// +page.ts（クライアントでのみ実行）
export const load: PageLoad = async ({ fetch }) => {
  // このコードはブラウザでのみ実行される
  const response = await fetch('/api/posts');
  const posts = await response.json();

  // Server Loadは存在しないため、dataパラメータは空
  return { posts };
};

// 管理画面やダッシュボード（SEO不要、インタラクティブ）
// src/routes/(admin)/+layout.ts
export const ssr = false;
export const prerender = false;

// この設定により
// - 管理画面全体がSPAとして動作
// - 高度なインタラクションが可能
// - しかしSEOは犠牲になる

// +page.svelte
<script lang="ts">
  import { invalidate, invalidateAll } from '$app/navigation';
  import type { PageData } from './$types';

  // Load関数から取得したデータを$propsで受け取る
  let { data }: { data: PageData } = $props();
  // data.userが自動的に更新される

  // 特定URLのデータを無効化
  async function refreshUserData() {
    // /api/userをfetchしているすべてのLoad関数が再実行される
    await invalidate('/api/user');
    // この後、data.userは新しい値に自動更新される
    // 手動でdataを更新する必要はない！
  }

  // カスタム識別子による無効化
  async function refreshCustomData() {
    // 'custom:data'に依存するLoad関数のみ再実行
    await invalidate('custom:data');
    // 該当するデータが自動的に更新される
  }

  // 全データを無効化
  async function refreshAll() {
    // ページ内のすべてのLoad関数を再実行
    await invalidateAll();
    // data全体が新しい値で置き換わる
  }
</script>

<!-- UIは自動的に更新される -->
<p>現在のユーザー: {data.user.name}</p>

<!-- 使用例：データ更新ボタン -->
<button onclick={refreshUserData}>
  ユーザー情報を更新
</button>

// +layout.ts - サイドバーの人気投稿
export const load: LayoutLoad = async ({ fetch, depends }) => {
  // 任意の識別子で依存関係を登録（URLではない！）
  depends('app:posts');  // "投稿関連のデータ"という意味の任意のラベル

  // データベースから直接取得（fetchを使わない）
  const popularPosts = await getPopularPostsFromDB();

  return { popularPosts };
};

// +page.ts - メインコンテンツの投稿一覧
export const load: PageLoad = async ({ fetch, depends }) => {
  // 同じ識別子を登録（layout.tsと連動させるため）
  depends('app:posts');  // この文字列はlayout.tsと同じならなんでもOK

  // APIから投稿を取得
  const posts = await fetch('/api/posts').then(r => r.json());
  // fetch()を使うと'/api/posts'への依存も自動登録される
  // つまりこのLoad関数は2つの識別子に依存
  // 1. 'app:posts' (手動登録)
  // 2. '/api/posts' (自動登録)

  return { posts };
};

// +page.server.ts - 複数の識別子を登録する例
export const load: PageServerLoad = async ({ depends, locals }) => {
  // 複数の識別子を登録可能
  depends('app:posts');      // 投稿更新時に再実行
  depends('user:profile');   // ユーザー情報更新時に再実行
  depends('app:settings');   // 設定変更時に再実行

  // 条件によって追加の識別子を登録
  if (locals.user?.isAdmin) {
    depends('admin:dashboard');  // 管理者なら管理画面更新時も再実行
  }

  // このLoad関数は以下のいずれかで再実行される
  // - invalidate('app:posts')
  // - invalidate('user:profile')
  // - invalidate('app:settings')
  // - invalidate('admin:dashboard') (管理者の場合)
  // - invalidateAll()

  const data = await getComplexData();
  return { data };
};

// +page.svelte - UIから更新
<script lang="ts">
  import { invalidate } from '$app/navigation';

  async function createPost() {
    // 新しい投稿を作成
    await fetch('/api/posts', {
      method: 'POST',
      body: JSON.stringify(newPost)
    });

    // 任意の識別子'app:posts'に依存するすべてのLoad関数を再実行
    await invalidate('app:posts');
    // → layout.tsとpage.tsの両方が再実行される（両方にdepends('app:posts')があるため）
    // → サイドバーとメインコンテンツが同時に更新される
  }

  async function refreshOnlyAPI() {
    // URL '/api/posts'に依存するLoad関数のみ再実行
    await invalidate('/api/posts');
    // → page.tsのみ再実行される（fetch('/api/posts')を使っているため）
    // → layout.tsは再実行されない（'/api/posts'をfetchしていないため）
  }

  async function refreshOnlyCustom() {
    // もし他の任意の識別子を使った場合
    await invalidate('user:settings');
    // → depends('user:settings')を登録したLoad関数のみ再実行
    // → 'app:posts'とは無関係なので、投稿関連は更新されない
  }
</script>