Next.js App Router - useQuery client-side only?

[JamesBream]

Apologies if this has already been asked, couldn't find a definite answer. As the title suggests, I'm trying to use RQ with Next.js 13 and the app router but am a little confused about how exactly it's meant to function for client-side only fetching.

The problem I'm running into is that despite not setting up any of the hydration or initial data pre-fetching, when I use useQuery inside a client-component marked with "use client", I'm finding that my fetcher function is being run on the server (in dev mode at least), which isn't what I was expecting at all.

I've confirmed that it's running on the server because I get a nice stack trace when fetch tries to build a URL from a relative path to my route handler e.g. fetch("/api/something"), which again worked perfectly fine previously with the pages router. Also added a non NEXT_PUBLIC_ prefixed env var to my fetcher function I can see logs out in my Nextjs dev console once.

Is there a way to stop useQuery from running server side like this? My reading of the docs suggests "it's fine to let some queries fetch on the client" so I believe this is a valid use case. Is this just a quirk of dev mode or am I missing something?

Appreciate any insights, definitely still getting to grips with the brave new app router world!

[JamesBream]

Solved my issue, kinda...

The query I was running had suspense enabled, which I'd hoped would mean my client-component marked page would begin rendering (client side), suspend due to data fetching and show my loading.tsx page, then it'd un-suspend once the data had finished fetching client-side.

Unfortunately, enabling suspense seems to trigger useQuery to run on the server. Because it doesn't have access to cookies, the requests fail (I can see this happening in my Nextjs dev server logs) and it's several seconds until RQ gives up on the server, everything renders in the browser and the requests go through as normal.

Looking at the docs for v4, I found:

Similarily, you must currently prefetch the data in a Server Component if you want it to be server rendered. A useQuery() call even with the suspense option enabled will not fetch data on the server, only on the client. We hope to support this in the future, but exact details are still unknown.

Given I'm not wanting to server render, this suggests that there should be no attempt to fetch on the server. Or is it not possible to use suspense client side only like this? Entirely possible I've misunderstood how suspense is meant to work!

Edit: Reading the v5 docs for suspense gives me the feeling that the only way to use suspense is to make sure all queries are set up to pre-fetch on the server. Just that excerpt from the v4 docs that had me confused!

[TkDodo]

this statement was true for the pages router in nextJs. The app router supports streaming and suspense, so it does fetch on the server now.

[MR-Mostafa]

Would you be able to provide an example? (RQ in nextjs app for ssr)
In the example directory, I did not find anything.

[TkDodo]

We have an example

[kawaijoe]

Given I'm not wanting to server render, this suggests that there should be no attempt to fetch on the server. Or is it not possible to use suspense client side only like this? Entirely possible I've misunderstood how suspense is meant to work!
Edit: Reading the v5 docs for suspense gives me the feeling that the only way to use suspense is to make sure all queries are set up to pre-fetch on the server. Just that excerpt from the v4 docs that had me confused!

Does that mean that using suspense client side will force all queries to be run on the server? If so, is there a way to force it to run only on the client?

[TkDodo]

I think so, yes.