Good practice for server-side data fetching: suspense vs refetch

[gbyesiltas]

Hey everyone,

We are using tanstack/query in a nuxt project. My question will be related to the difference between the refetch and suspense functions in a specific setting, but let me give some context:

For suspending a network query on the server-side, the docs advice using:

const { suspense } = useQuery(myQueryOptions);

onServerPrefetch(async () => {
  await suspense();
});

However, I noticed that useQuery, as long as it is enabled, will always trigger the queryFn on the server-side; meaning if we don't suspend it, will just cause us to have a bunch of floating network requests.

useQuery(myQueryOptions);

// We don't want this call to be necessarily suspended, so we don't have `useServerPrefetch`.
// This will trigger the queryFn on the server-side, but will not await.
// On the client-side rehydration, it will re-trigger it.
// Meaning we will end up having made an unnecessary network request on the server.

So, I wanted to add a global enabled option for the vueQuery instance to enabled: import.meta.client. In this approach, we fix the unnecessary network calls. Though for the occasions where we do want the suspense behaviour, we have two options:

// ❌ doesn't work:

// has `enabled: false` on the server-side due to global option
const { suspense } = useQuery(myQueryOptions);

// `suspense` respects the `enabled` option and does not resolve
onServerPrefetch(async () => {
  await suspense();
});

// ⚠️ option 1 

// explicitly set `enabled: true` for cases where we want to suspend the call
const { suspense } = useQuery({ ...myQueryOptions, enabled: true });

// does resolve on the server-side thanks to `enabled: true`
onServerPrefetch(async () => {
  await suspense();
});

// ⚠️ option 2

// has `enabled: false` on the server-side due to global option
const { refetch } = useQuery(myQueryOptions);

// `refetch` does not respect the enabled option, and hence the call does resolve
onServerPrefetch(async () => {
  await refetch();
});

Now, I'm a bit torn between these two options, and I feel like one thing I'm missing is the difference between suspense and refetch. So, in this context, what do you guys think would be a better way to go?

Thanks!