进阶与上线

SSR / CSR 边界策略

// hooks.server.ts / +layout.server.ts
import { createQueryClient } from '@iostore/store/query';

export async function loadDashboard(fetch: typeof globalThis.fetch) {
  const client = createQueryClient();
  const query = client.defineQuery({
    key: ['dashboard'],
    queryFn: ({ signal }) => fetch('/api/dashboard', { signal }).then((r) => r.json()),
  });

  await query.prefetch();
  return client.dehydrate();
}

每个请求创建独立 query client，禁止跨请求复用单例。
SSR 仅传输可序列化数据（plain object/array）。
Hydration 后继续保留 invalidate/refetch 语义，不把缓存注入当成终态。

生产排障清单

检查 server/client 的 key 是否完全一致。
检查 dehydrated 数据是否被非序列化值污染。
检查写后是否仍执行 invalidate，避免“首屏新、交互旧”。
检查请求超时与重试配置，避免服务端重放放大。

进阶与上线

SSR / CSR 边界策略

生产排障清单

相关 API

导航