feat: add useHydrate to support ssr

src/__tests__/useHydrate.test.tsx

@@ -0,0 +1,49 @@
+import { act, render } from '@testing-library/react';
+import { useAccessor, useHydrate } from '../lib';
+import type { Post } from './types';
+import { createPost, createPostModel, createPostModelControl, sleep } from './utils';
+import { renderToString } from 'react-dom/server';
+
+describe('useHydrate', () => {
+  test('should hydrate successfully', async () => {
+    const onSuccessMock = vi.fn();
+    const updateMock = vi.fn();
+    const control = createPostModelControl({ onSuccessMock });
+    const { getPostById, postAdapter, postModel } = createPostModel(control);
+    function Component({ postId }: { postId: number }) {
+      const { data } = useAccessor(getPostById(postId), postAdapter.tryReadOneFactory(postId), {
+        revalidateIfStale: false,
+      });
+
+      return <div>title: {data?.title}</div>;
+    }
+    function Page({ post }: { post: Post }) {
+      useHydrate(post, () => {
+        postModel.mutate(draft => {
+          postAdapter.createOne(draft, post);
+          updateMock();
+        });
+      });
+
+      return <Component postId={post.id} />;
+    }
+
+    let ui = <Page post={createPost(0)} />;
+    const container = document.createElement('div');
+    document.body.append(container);
+    container.innerHTML = renderToString(ui);
+    const { getByText, rerender } = render(ui, { container, hydrate: true });
+
+    getByText('title: title0');
+    await act(() => sleep(10));
+    expect(onSuccessMock).toHaveBeenCalledTimes(0);
+    expect(updateMock).toHaveBeenCalledTimes(1);
+
+    ui = <Page post={createPost(1)} />;
+    rerender(ui);
+    getByText('title: title1');
+    await act(() => sleep(10));
+    expect(onSuccessMock).toHaveBeenCalledTimes(0);
+    expect(updateMock).toHaveBeenCalledTimes(2);
+  });
+});

src/lib/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useAccessor';
+export * from './useHydrate';

src/lib/hooks/useHydrate.ts

@@ -0,0 +1,8 @@
+const dataset = new WeakSet();
+
+export function useHydrate<T extends object>(data: T, update: () => void): void {
+  if (!dataset.has(data)) {
+    dataset.add(data);
+    update();
+  }
+}