データフェッチング戦略

// ❌ 悪い例：順次実行（遅い）
const user = await fetch('/api/user').then(r => r.json());
const posts = await fetch('/api/posts').then(r => r.json());
const comments = await fetch('/api/comments').then(r => r.json());
// 合計時間 = user取得時間 + posts取得時間 + comments取得時間

// ✅ 良い例：並列実行（速い）
const [user, posts, comments] = await Promise.all([
  fetch('/api/user').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comments').then(r => r.json())
]);
// 合計時間 = 最も遅いリクエストの時間のみ

// +page.ts
import type { PageLoad } from './$types';

export const load: PageLoad = async ({ fetch, params }) => {
  // 複数のAPIエンドポイントから並列でデータ取得
  const [user, posts, comments] = await Promise.all([
    fetch(`/api/users/${params.id}`).then(r => r.json()),
    fetch(`/api/users/${params.id}/posts`).then(r => r.json()),
    fetch(`/api/users/${params.id}/comments`).then(r => r.json())
  ]);
  
  return {
    user,
    posts,
    comments
  };
};

export const load: PageLoad = async ({ fetch, params }) => {
  // ユーザー情報を先に取得
  const user = await fetch(`/api/users/${params.id}`).then(r => r.json());
  
  // ユーザーの情報に基づいて並列取得
  const [posts, followers] = await Promise.all([
    fetch(`/api/posts?author=${user.id}`).then(r => r.json()),
    fetch(`/api/users/${user.id}/followers`).then(r => r.json())
  ]);
  
  return {
    user,
    posts,
    followers
  };
};

export const load: PageLoad = async ({ fetch }) => {
  // キャッシュを活用
  const staticData = await fetch('/api/static-data', {
    headers: {
      'Cache-Control': 'max-age=3600' // 1時間キャッシュ
    }
  }).then(r => r.json());
  
  // 常に最新データを取得
  const dynamicData = await fetch('/api/dynamic-data', {
    cache: 'no-store'
  }).then(r => r.json());
  
  return {
    staticData,
    dynamicData
  };
};

// lib/cache.ts
const cache = new Map<string, { data: any; timestamp: number }>();
const CACHE_DURATION = 5 * 60 * 1000; // 5分

export async function getCachedData<T>(
  key: string,
  fetcher: () => Promise<T>
): Promise<T> {
  const cached = cache.get(key);
  const now = Date.now();
  
  if (cached && now - cached.timestamp < CACHE_DURATION) {
    return cached.data;
  }
  
  const data = await fetcher();
  cache.set(key, { data, timestamp: now });
  
  return data;
}

// +page.server.ts
import { getCachedData } from '$lib/cache';

export const load: PageServerLoad = async () => {
  const data = await getCachedData('popular-posts', async () => {
    return await db.post.findMany({
      where: { popular: true },
      take: 10
    });
  });
  
  return { posts: data };
};

// +page.svelte
<script lang="ts">
  import { invalidate } from '$app/navigation';
  import { onMount } from 'svelte';
  import type { PageData } from './$types';
  
  let { data }: { data: PageData } = $props();
  
  onMount(() => {
    // 30秒ごとにデータを更新
    const interval = setInterval(() => {
      invalidate('/api/live-data');
    }, 30000);
    
    return () => clearInterval(interval);
  });
</script>

// +server.ts (APIエンドポイント)
import type { RequestHandler } from './$types';

export const GET: RequestHandler = () => {
  const stream = new ReadableStream({
    start(controller) {
      const interval = setInterval(() => {
        const data = JSON.stringify({ 
          time: new Date().toISOString() 
        });
        controller.enqueue(`data: ${data}\n\n`);
      }, 1000);
      
      return () => clearInterval(interval);
    }
  });
  
  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache'
    }
  });
};

<!-- +page.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  
  let data = $state<any>(null);
  
  onMount(() => {
    const eventSource = new EventSource('/api/stream');
    
    eventSource.onmessage = (event) => {
      data = JSON.parse(event.data);
    };
    
    return () => eventSource.close();
  });
</script>

// +page.server.ts
export const load: PageServerLoad = async ({ locals }) => {
  const baseData = await getPublicData();
  
  if (!locals.user) {
    return { ...baseData, user: null };
  }
  
  // 認証済みユーザー向けの追加データ
  const [profile, preferences] = await Promise.all([
    getUserProfile(locals.user.id),
    getUserPreferences(locals.user.id)
  ]);
  
  return {
    ...baseData,
    user: locals.user,
    profile,
    preferences
  };
};

export const load: PageServerLoad = async ({ request }) => {
  const userAgent = request.headers.get('user-agent') || '';
  const isMobile = /mobile/i.test(userAgent);
  
  if (isMobile) {
    // モバイル向け軽量データ
    return {
      items: await getLightweightData()
    };
  }
  
  // デスクトップ向け詳細データ
  return {
    items: await getDetailedData()
  };
};

export const load: PageLoad = async ({ fetch }) => {
  const results = await Promise.allSettled([
    fetch('/api/main-data').then(r => r.json()),
    fetch('/api/optional-data').then(r => r.json()),
    fetch('/api/recommendations').then(r => r.json())
  ]);
  
  return {
    mainData: results[0].status === 'fulfilled' 
      ? results[0].value 
      : null,
    optionalData: results[1].status === 'fulfilled'
      ? results[1].value
      : { fallback: true },
    recommendations: results[2].status === 'fulfilled'
      ? results[2].value
      : []
  };
};

export const load: PageLoad = async ({ fetch }) => {
  const start = performance.now();
  
  const data = await fetch('/api/data').then(r => r.json());
  
  const duration = performance.now() - start;
  
  // パフォーマンスログ
  if (duration > 1000) {
    console.warn(`Slow request: ${duration}ms`);
  }
  
  return { data };
};