---title: SSRnav: 3.02keywords: ssr,server,hydrate,hydration,next,nextjs,gatsby,remix,waku,framework---
## useHydrateAtoms
Ref: https://github.com/pmndrs/jotai/issues/340
### Usage
```jsimport { atom, useAtom } from 'jotai'import { useHydrateAtoms } from 'jotai/utils'
const countAtom = atom(0)const CounterPage = ({ countFromServer }) => { useHydrateAtoms([[countAtom, countFromServer]]) const [count] = useAtom(countAtom) // count would be the value of `countFromServer`, not 0.}```
The primary use case for `useHydrateAtoms` are SSR apps like Next.js, where an initial value is e.g. fetched on the server, which can be passed to a component by props.
```ts// Definitionfunction useHydrateAtoms( values: Iterable<readonly [Atom<unknown>, unknown]>, options?: { store?: Store },): void```
The hook takes an iterable of tuples containing `[atom, value]` as an argument and optional options.
```js// Usage with an array, specifying a storeuseHydrateAtoms( [ [countAtom, 42], [frameworkAtom, 'Next.js'], ], { store: myStore },)// Or with a mapuseHydrateAtoms(new Map([[count, 42]]))```
Atoms can only be hydrated once per store. Therefore, if the initial value used is changed during rerenders, it won't update the atom value.If there is a unique need to re-hydrate a previously hydrated atom, pass the optional dangerouslyForceHydrate as trueand note that it may behave wrongly in concurrent rendering.
```jsuseHydrateAtoms( [ [countAtom, 42], [frameworkAtom, 'Next.js'], ], { dangerouslyForceHydrate: true, },)```
If there's a need to hydrate in multiple stores, use multiple `useHydrateAtoms` hooks to achieve that.
```jsuseHydrateAtoms([ [countAtom, 42], [frameworkAtom, 'Next.js'],])useHydrateAtoms( [ [countAtom, 17], [frameworkAtom, 'Gatsby'], ], { store: myStore },)```
If you are using TypeScript with target `ES5`, you might need `as const` cast on the array to preserve the tuple type.
```tsuseHydrateAtoms([ [countAtom, 42], [frameworkAtom, 'Next.js'],] as const)```
### Demo
<Stackblitz id="stackblitz-starters-b7cvxi" file="pages%2Findex.tsx" />There's more examples in the [Next.js section](../guides/nextjs.mdx).