I'm creating an app in Nextjs 13 with the new app structure. This means I try to use server-side rendering as much as possible. For the moment I have a structure like below:
Blue is for server-side components that fetch the data with await functions. Red is for client-side components. I need client side here for calculating the size of the div to render charts correctly.
I now try to create a refresh button by calling router.refresh like described here:
https://beta.nextjs.org/docs/data-fetching/mutating
But what is the correct way of handling this. Where should I call router.refresh or is there a better method to refresh in this case?
Should I just create a client component from the refresh button and call router.refresh from there? Feels strange. Current state and scroll position should be the same. At the moment this is a button, but later this will be an automatic refresh after x minutes. All charts will be updated at the same time.
Update: I made a client component for the refresh button and it works. I guess it's just getting used to restructuring and move client side stuff to the leaves of the tree. Downside of this method is that it refreshes the complete page, but I can cache most of those queries.