hydratable - SSRデータの再利用

<script lang="ts">
  import { getUser } from 'my-database-library';

  // サーバーでユーザーデータを取得し、HTMLをレンダリング
  // しかし、ハイドレーション時にクライアントで再度取得してしまう！
  const user = await getUser();
</script>

<h1>{user.name}</h1>

<script lang="ts">
  import { hydratable } from 'svelte';
  import { getUser } from 'my-database-library';

  // サーバー: getUser()を実行し、結果をシリアライズしてHTMLに埋め込む
  // クライアント（ハイドレーション時）: シリアライズされたデータを使用
  // クライアント（ハイドレーション後）: getUser()を実行
  const user = await hydratable('user', () => getUser());
</script>

<h1>{user.name}</h1>

import { hydratable } from 'svelte';

interface User {
	id: string;
	name: string;
	email: string;
}

// 型安全なhydratable
const user = await hydratable<User>('user', async () => {
	const response = await fetch('/api/user');
	return response.json();
});

<script lang="ts">
  import { hydratable } from 'svelte';

  // 異なるキーで異なるデータを取得
  const posts = await hydratable('posts', () => fetchPosts());
  const comments = await hydratable('comments', () => fetchComments());

  // 同じキーなら同じデータを返す（関数は再実行されない）
  const postsAgain = await hydratable('posts', () => fetchPosts());
  // posts === postsAgain
</script>

import { hydratable } from 'svelte';

// サーバーで生成されたランダム値がクライアントでも同じになる
const randomId = hydratable('random-id', () => Math.random().toString(36).slice(2));

import { hydratable } from 'svelte';

// SSR時の時刻がハイドレーション時にも維持される
const timestamp = hydratable('page-timestamp', () => Date.now());

<script lang="ts">
  import { hydratable } from 'svelte';

  // Promiseを含むオブジェクトも正しくシリアライズされる
  const data = hydratable('async-data', () => {
    return {
      user: Promise.resolve({ name: 'Alice' }),
      posts: Promise.resolve([{ title: 'First Post' }])
    };
  });
</script>

<h1>{await data.user.then(u => u.name)}</h1>
{#each await data.posts as post}
  <p>{post.title}</p>
{/each}

// server.ts
import { render } from 'svelte/server';
import App from './App.svelte';

// ユニークなnonce（一度だけ使用する数値）を生成
const nonce = crypto.randomUUID();

const { head, body } = await render(App, {
	csp: { nonce },
});

// レスポンスヘッダーにnonceを設定
response.headers.set('Content-Security-Policy', `script-src 'nonce-${nonce}'`);

// build.ts
import { render } from 'svelte/server';
import App from './App.svelte';

const { head, body, hashes } = await render(App, {
	csp: { hash: true },
});

// hashes.scriptは["sha256-abcd123"]のような形式
response.headers.set(
	'Content-Security-Policy',
	`script-src ${hashes.script.map((h) => `'${h}'`).join(' ')}`
);

// Remote Functions（推奨）
import { query } from '$app/server';

export const getUser = query(async () => {
	return await db.getUser();
});

// 低レベルAPI（hydratable）
import { hydratable } from 'svelte';

const user = await hydratable('user', () => db.getUser());

<script lang="ts">
  import { hydratable } from 'svelte';

  interface User {
    id: string;
    name: string;
    avatar: string;
  }

  // セッションからユーザー情報を取得
  const user = await hydratable<User | null>('current-user', async () => {
    // この関数はサーバーでのみ実行される（ハイドレーション中は実行されない）
    const response = await fetch('/api/me', {
      credentials: 'include'
    });

    if (!response.ok) {
      return null;
    }

    return response.json();
  });
</script>

{#if user}
  <header>
    <img src={user.avatar} alt={user.name} />
    <span>ようこそ、{user.name}さん</span>
  </header>
{:else}
  <a href="/login">ログイン</a>
{/if}

<script lang="ts">
  import { hydratable } from 'svelte';

  interface Config {
    apiEndpoint: string;
    featureFlags: Record<string, boolean>;
    theme: 'light' | 'dark';
  }

  // アプリケーション設定を取得
  const config = await hydratable<Config>('app-config', async () => {
    // サーバーサイドで環境変数から設定を構築
    return {
      apiEndpoint: process.env.API_ENDPOINT ?? '/api',
      featureFlags: JSON.parse(process.env.FEATURE_FLAGS ?? '{}'),
      theme: 'light'
    };
  });
</script>

<!-- 設定を使用 -->
<app-root data-api={config.apiEndpoint} data-theme={config.theme}>
  <!-- ... -->
</app-root>