How to disable Nuxt SSR running queries?
I am trying to use TanStack Query with Nuxt for a pre-rendered/SSG/Jamstack app with client-side data fetching. For this reason I want to stop TanStack Query from running queries on the server (at pre-render). There does not seem to be an
ssr
option, and the closest thing I have found is setting enabled
to process.client
. Is this fine? It's tricky to avoid hydration warnings with e.g. isFetching
though.4 Replies
like-gold•2y ago
If you want to completly disable fetching on the server, you could try setting
defaultOptions: {enabled: !process.server}
in your nuxt plugin.
Or per query if you need to disable some of them.multiple-amethystOP•2y ago
I want to completely disable server-side fetching. Setting
enabled
globally is a tricky solution because if I ever use enabled
inside of useQuery
for something other than process.client
, and I forget to also check process.client
, it'll run on the server, so I was hoping for a better way.multiple-amethystOP•2y ago
This is the suggested solution for SvelteKit though: https://tanstack.com/query/latest/docs/svelte/ssr
SSR and SvelteKit | TanStack Query Docs
Setup
SvelteKit defaults to rendering routes with SSR. Because of this, you need to disable the query on the server. Otherwise, your query will continue executing on the server asynchronously, even after the HTML has been sent to the client.
multiple-amethystOP•2y ago
On second thought, this will probably never be an issue