Yeah that’s pretty standard afaik

The pattern with the server component giving loaded data to a client component roughly matches the old data fetching methods like getServerSideProps, just at a component level. Whether copying props to state is a good idea is a big topic, and there are many good and bad reasons to do it. The props from the server component actually can change at runtime if the query string changes for example.

One of the benefits of app router is that it simplifies data management by removing the need to duplicate a server state on the client. By keeping the server state on the server, we only need to maintain a single source of truth.

So when it comes to mutations, you can do this in the client component:

<button onClick={() => {
  fetch({method: "POST", body: ...}).then(() => {
  // Refetches data from server components and updates UI with fresh data
    router.refresh()
  })
}}>

</button>

Or use server actions. This animation may be helpful. https://twitter.com/asidorenko_/status/1681017694072500224