SSR and suspense (Vue & Nuxt)

[ozum]

Hi,

As far as I understand from docs (SSR & Nuxt and app.vue file in Nuxt example), I need to use await suspense() for SSR fetch and hydrate data. If I don't use suspense, when I refresh the page, data is undefined until it is fetched client-side.

For example:

<script setup lang="ts">
const { data, suspense } = useQuery({ queryKey: ["test"], queryFn: fetcher });
await suspense();
</script>

1. Is this assumption true?
2. Is there a way to automate or a place to define suspense for queries? (I want to avoid to forget adding await suspense()).

[DamianOsipiuk]

Hi,
Correct, if you do not use suspense or queryClient.prefetchQuery, then nuxt will not wait for query to actually resolve on the server.
Also please remember to set high enough staleTime to avoid refetch immediately after hydration.

As for suspense. It is done this way, because you have to place all of your useQuery calls before the first await. Otherwise you will encounter an error where useQuery after await does not have access to Vue context anymore.

I have not figured out a better way to do this. If you have some suggestions that would not break when using multiple useQuery calls, i would be more than happy to implement it.

[ozum]

Thanks for the explanation.

[genu]

I don't know if its just me, but I'm unable to get it to work correctly.

const {
  data,
  isLoading,
  suspense,
} = useQuery(...)

onServerPrefetch(async () => await suspense())
await suspense()

console.log('data exists: ', data.value !== undefined)

On the client I get data exists: true and on the server I get data exists: false

However, if I do instead:

const { data: data2 } = await suspense()

console.log('data exists: ', job.value !== undefined)
console.log('data2 exists: ', data2 !== undefined)

Now I get data2 exists: true on both client and server.

Why is that? I would think that calling suspense() would populate the query data, but instead it returns a new result?... hmm

[NoeReverse]

What if I want the request to be sent only on the client side? If I don't use suspense, the request is sent twice: once on the server, once on the client. To avoid this behavior, I use the option enabled: enabled: process.client. Is this correct? And is there another way to make requests only client-side?

[abrunner94]

Any updates on this?

[AaronConlon]

Hi, How can I use queryClient in Nuxt App?I want to use queryClient to refetch some query function at other compoent.Thanks. @DamianOsipiuk

[DamianOsipiuk]

You can get access to queryClient via const queryClient = useQueryClient() composable.
Then use queryClient.invalidateQuery.