跳转到内容

进阶与上线

SSR / CSR 边界策略

// app/(dashboard)/layout.tsx
import { createQueryClient } from '@iostore/store/query';

export async function createRequestQueryClient(userId: string) {
  const client = createQueryClient();
  const dashboard = client.defineQuery({
    key: ['dashboard', userId],
    queryFn: ({ signal }) =>
      fetch('https://example.com/api/dashboard?user=' + userId, { signal }).then((r) => r.json()),
  });

  await dashboard.prefetch();
  return { client, dehydrated: client.dehydrate() };
}

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

生产排障清单

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

相关 API

导航