[Vuejs]-Nuxt 3 SSR useFetch refetching data client side

by

0👍

To prevent refetching on client side, u can try to use ‘useState’ and ‘watch:false’

‘watch:false’ will prevent a refetch if the url or another parameter will change, which might be the case in your example.

let result = useState('result');
  result.value = await useFetch(url, {
    headers: {
      fetchMode: 'headless',
    },
    server: true,
    watch: false,
  });

from the Docs:

useState: is an SSR-friendly ref replacement. Its value will be
preserved after server-side rendering (during client-side hydration)
and shared across all components using a unique key.

from the Docs:

watch: Watch an array of reactive sources and auto-refresh the fetch result when they change. Fetch options and URL are watched by default. You can completely ignore reactive sources by using watch: false

Leave a comment