createAsync different values on client and server SSR issue

I'm trying to conditionally render components based on auth - think paywalled content.

I have a server function that detects if user has logged in:

const _userLoggedIn = cache(async () => {
  'use server'
  const sessionData = await getSession()
  const userId = sessionData.data.userId
  if (userId) return true
  return false
}, 'userLoggedIn')

const _userLoggedIn = cache(async () => {
  'use server'
  const sessionData = await getSession()
  const userId = sessionData.data.userId
  if (userId) return true
  return false
}, 'userLoggedIn')

const _userLoggedIn = cache(async () => {
  'use server'
  const sessionData = await getSession()
  const userId = sessionData.data.userId
  if (userId) return true
  return false
}, 'userLoggedIn')

const _userLoggedIn = cache(async () => {
  'use server'
  const sessionData = await getSession()
  const userId = sessionData.data.userId
  if (userId) return true
  return false
}, 'userLoggedIn')

However, createAsync returns undefined leading nothing to be rendered on the server:

  const userLoggedIn = createAsync(() => _userLoggedIn(), { deferStream: true })
  console.log(userLoggedIn())

  const userLoggedIn = createAsync(() => _userLoggedIn(), { deferStream: true })
  console.log(userLoggedIn())

  const userLoggedIn = createAsync(() => _userLoggedIn(), { deferStream: true })
  console.log(userLoggedIn())

  const userLoggedIn = createAsync(() => _userLoggedIn(), { deferStream: true })
  console.log(userLoggedIn())

Server:

undefined

undefined

undefined

undefined

Client returns the expected value:

true

true

true

true

createAsync different values on client and server SSR issue

Similar Threads

Similar Threads

Similar Threads