Fetching data on server side in generate mode

[anatolykopyl]

I can't figure out a way to fetch data during static site generation and have it persist to the client side.
The fetching is happening inside of a composable that wraps useFetch and is widely used across the app.

Here's the ways I tried to migrate this composable:

useLazyAsyncData

This seemed like the most straight forward way of doing things, but the client first sees the page without the fetched data.

// This is the inside of a composable that receives url and returns state
const {data: state} = useLazyAsyncData(
  url,
  () => $http.$get(`${API_BASE}${url}`),
  {
    default: () => ([]),
    transform: formatter
  }
)

useLazyAsyncData + onServerPrefetch

Then I tried to call the refresh function from useLazyAsyncData in onServerPrefetch. Still no initial data on client.

// This is the inside of a composable that receives url and returns state
const {data: state, refresh} = useLazyAsyncData(
  url,
  () => $http.$get(`${API_BASE}${url}`),
  {
    default: () => ([]),
    transform: formatter
  }
)

onServerPrefetch(async() => {
  await refresh()
})

useState

An alternative way I tried is to have a useState ref and fetch data manually in onServerPrefetch. Still nothing.

// This is the inside of a composable that receives url and returns state
const state = useState(url, () => ([]))

onServerPrefetch(async() => {
  const response = await $http.$get(`${API_BASE}${url}`)
  state.value = formatter(response)
})

This is something I've been fighting with for a pretty long time now, so any advice would be appreciated!