import { AtomValue, HydrateAtoms } from '@suspensive/jotai'
import { atom } from 'jotai'

const userIdAtom = atom('')

// Server Component
const Page = async () => {
  const userId = await getSessionUserId()

  return (
    <HydrateAtoms atomValues={[[userIdAtom, userId]]}>
      <AtomValue atom={userIdAtom}>
        {(userId) => <div>userId: {userId}</div>}
      </AtomValue>
    </HydrateAtoms>
  )
}

import { AtomValue, HydrateAtoms } from '@suspensive/jotai'
import { atom, createStore } from 'jotai'
import { Provider } from 'jotai/react'

const userIdAtom = atom('')
const customStore = createStore()

// Server Component
const Page = async () => {
  const userId = await getSessionUserId()

  return (
    <Provider store={customStore}>
      <HydrateAtoms
        atomValues={[[userIdAtom, userId]]}
        options={{ store: customStore, dangerouslyForceHydrate: true }}
      >
        <AtomValue atom={userIdAtom}>
          {(userId) => <div>userId: {userId}</div>}
        </AtomValue>
      </HydrateAtoms>
    </Provider>
  )
}

import { Atom, HydrateAtoms } from '@suspensive/jotai'
import { Suspense } from '@suspensive/react'
import { atom } from 'jotai'

const userIdAtom = atom('')
const userDetailAtom = atom(async (get) => {
  const userId = get(userIdAtom)
  return await fetchUserDetail(userId)
})

// Server Component
const Page = async () => {
  const userId = await getSessionUserId()

  return (
    <HydrateAtoms atomValues={[[userIdAtom, userId]]}>
      <Suspense fallback={'pending...'}>
        <Atom atom={userDetailAtom}>{([user]) => <div>{user.name}</div>}</Atom>
      </Suspense>
    </HydrateAtoms>
  )
}