データフローの詳細

// +layout.server.ts と +page.server.ts が同時に実行される
// お互いのデータを待つ必要がない
// 例：ユーザー情報と商品情報を並列で取得
export const load: LayoutServerLoad = async () => {
  return { user: await getUser() };  // 非同期だが他を待たない
};

export const load: PageServerLoad = async () => {
  return { products: await getProducts() };  // 上記と同時実行
};

// Server Loadのデータを受け取って実行
export const load: PageLoad = async ({ data, fetch }) => {
  // data: Server Loadからのデータ
  // fetch: SSR対応のfetch関数（Cookie等を自動で引き継ぐ）
  const additional = await fetch('/api/extra');
  return {
    ...data,  // Server Loadのデータを展開
    additional: await additional.json()  // 追加データ
  };
};

<!-- プリフェッチ戦略の設定 -->
<!-- hover: マウスオーバー時に先読み（デフォルト） -->
<a href="/posts/123" data-sveltekit-preload-data="hover">
  記事を読む
</a>

<!-- tap: タッチ/クリック時に先読み（モバイル向け） -->
<a href="/posts/456" data-sveltekit-preload-data="tap">
  重い記事を読む
</a>

<!-- off: プリフェッチを無効化 -->
<a href="/large-page" data-sveltekit-preload-data="off">
  大きなページへ
</a>

import { prefetch, prefetchRoutes } from '$app/navigation';

// 単一ページのプリフェッチ
await prefetch('/posts/123');

// 複数ページの一括プリフェッチ
await prefetchRoutes(['/about', '/contact', '/products']);

// 特定のデータのみ無効化
import { invalidate } from '$app/navigation';

// URLベースの無効化 - このURLに依存するLoad関数が再実行される
await invalidate('/api/user');
// 例：/api/userをfetchしているすべてのLoad関数が再実行

// カスタム識別子による無効化
await invalidate('app:user');
// depends('app:user')を宣言したLoad関数のみ再実行

// 全データの無効化 - すべてのLoad関数を再実行
import { invalidateAll } from '$app/navigation';
await invalidateAll();
// 画面全体のデータをリフレッシュ

// +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.server.ts - 並列でデータ取得
export const load: PageServerLoad = async ({ fetch }) => {
  // Promise.allで3つのAPIを同時に呼び出す
  const [posts, categories, tags] = await Promise.all([
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/categories').then(r => r.json()),
    fetch('/api/tags').then(r => r.json())
  ]);
  
  // 例：各APIが1秒かかる場合
  // 順次実行: 3秒
  // 並列実行: 1秒（3倍高速）
  
  return { posts, categories, tags };
};

// ❌ 悪い例：順次実行（ウォーターフォール）
export const load: PageServerLoad = async ({ fetch }) => {
  // 1. ユーザー取得（1秒）
  const user = await fetch('/api/user').then(r => r.json());
  // 2. 投稿取得（1秒）- ユーザー取得を待つ
  const posts = await fetch(`/api/users/${user.id}/posts`).then(r => r.json());
  // 3. コメント取得（1秒）- 投稿取得を待つ
  const comments = await fetch(`/api/users/${user.id}/comments`).then(r => r.json());
  
  // 合計: 3秒かかる
  return { user, posts, comments };
};

// ✅ 良い例：並列実行の最大化
export const load: PageServerLoad = async ({ fetch }) => {
  // 1. ユーザー取得を開始（Promiseを保持）
  const userPromise = fetch('/api/user').then(r => r.json());
  
  // 2. ユーザー情報を取得（ここで初めてawait）
  const user = await userPromise;
  
  // 3. 依存するデータを並列取得
  const [posts, comments] = await Promise.all([
    fetch(`/api/users/${user.id}/posts`).then(r => r.json()),
    fetch(`/api/users/${user.id}/comments`).then(r => r.json())
  ]);
  
  // 合計: 2秒（ユーザー取得1秒 + 並列取得1秒）
  return { user, posts, comments };
};

// レイアウトとページで独立したデータは並列取得
// +layout.server.ts
export const load = async () => {
  return { user: await getUser() };
};

// +page.server.ts（レイアウトのデータを待たない）
export const load = async () => {
  return { posts: await getPosts() };
};

// HTTPキャッシュヘッダーの設定
export const load: PageServerLoad = async ({ setHeaders }) => {
  setHeaders({
    'cache-control': 'max-age=3600' // 1時間キャッシュ
  });
  
  return { data: await fetchData() };
};