0

target: 'static' ssr: false

I have configured my project with ssg.

If you look at fetch in the official nuxt documentation, it says that fetch is executed when a page is created and cached in the client.

However, when data is fetched from fetch and the corresponding url is accessed, an empty area appears and then the content is filled. This means calling from the client.

How can fetch be executed when page is created and all db data can be seen when url is accessed?

<template>
  <div>
    {{ testData }}
  </div>
</template>

<script>
import { defineComponent, ref, useContext, useFetch } from '@nuxtjs/composition-api'

export default defineComponent({
  name: 'Test',
  fetchOnServer: false,
  setup () {
    const testData = ref({})
    const { $axios } = useContext()

    useFetch(async () => {
      testData.value = await $axios.get('https://jsonplaceholder.typicode.com/users/1')
    })

    return {
      testData
    }
  }
})
</script>

<style>

</style>
donghoonlee
  • 59
  • 4
  • You're using `ssr: false` here, not sure how you can expect it to run anywhere else than on the client ("no SSR" is basically "client-only please"). – kissu Aug 26 '22 at 01:11
  • You've specified fetchOnServer as false, but according to the official documentation "When fetchOnServer is false or returns false, fetch will be called only on client-side and $fetchState.pending will return true when server-rendering the component." So you should set it as true – SIHEM BOUHENNICHE Aug 26 '22 at 08:09
  • I mean, if OP is using `ssr: false`, there is no point into setting `fetchOnServer` to `true` neither for sure. – kissu Aug 26 '22 at 08:11

0 Answers0