Add ability to dehyrate & hydrate state (for integrating with TanStack Router)

[phuctm97]

TanStack Router/Start has built-in dehydrate & hydrate workflow for making state manager works very well with SSR. It would be great if Jotai supports it out-of-the-box as well.

export function createRouter() {
  const store = createStore();
  const queryClient = new QueryClient();

  return createRouter({
    routeTree,
    context: {
      store,
      queryClient,
    },
    dehydrate: () => ({
      storeState: store.dehydrate(),
      queryClientState: dehydrate(queryClient),
    }),
    hydrate: ({ storeState, queryClientState }) => {
      store.hydrate(storeState);
      hydrate(queryClient, queryClientState)
    },
    Wrap: ({ children }) => (
      <Provider store={store}>
        <QueryClientProvider client={queryClient}>
          {children}
        </QueryClientProvider>
      </Provider>
    ),
  })
}

[dai-shi]

Jotai core is probably unopinionated about it. Some possible options are:

• https://github.com/jotaijs/jotai-tanstack-query @kalijonn
• https://github.com/jotaijs/jotai-ssr @akkadaska
• or a new package

[akkadaska]

@phuctm97

jotai-ssr provides a HydrationBoundary component inspired by Tanstack Query.

For more details, check out the README section:
https://github.com/jotaijs/jotai-ssr?tab=readme-ov-file#hydrating-atoms

I’m currently working on refactoring, and the updates will be released soon. The new README explains the component in detail and how to hydrate atoms using this library.
You can preview it here:
jotaijs/jotai-ssr#11
https://github.com/jotaijs/jotai-ssr/blob/4f2325bc0110507336a10510c90275a52d5df00c/README.md#hydrationboundary

If you have any ideas, feel free to open an issue or create a pull request!
https://github.com/jotaijs/jotai-ssr