I have an application where I'm using NextJS 13, thus server components are default. The main component the user works on will have to be a client component because it has a canvas integrated into it, and the main purpose of the application is this canvas. So I'm wondering if a good structure for my application is using fetch in server components which automatically caches, but in client components (my canvas) I use React-Query since the user's actions will have to be saved in a databse, and there is a lot of client state due to the nature of the application so I use Zustand for whatever state is leftover. Is this a good strategy?

tldr:

Fetch API for Server Components as NextJS caches automatically
React-Query for fetching in Client components
Zustand for the client state left over as this is a state-heavy application

I've used React a lot but new to NextJS and am wondering about this, thanks in advance!