How would you manage data fetched from the server that needs to be mutated on the client side?

[djmin43]

Problem

I am creating a simple discussion board with bunch of posts and a 'like' feature like youtube or facebook. I am using Nextjs app dir for the framework and RTK Query for data-fetching and data-caching from the server.

I want to fetch the data of a post from the server using 'fetch' because I want to build the page ahead of the time. At the same time, I want to mutate some information of the post data, such as mutating the count of 'like.' (with optimistic update preferrably)

How would you architect or manage this use case in the most elegant way possible? Let's assume I am working with a single api call that includes post content and the count of likes.

Possible ways to solve

1. Forget about RTK Query, use Nextjs all the way with 'fetch' and 'server action'.

• This is the most 'Nextjs' way possible to solve the issue.
• The drawback would be I don't take advantage of the feature-fullness of RTK and RTK Query.
• I don't think optimistic update is possible in this case unless I move the like button and logic to the 'use client' land.

2. Fetch data from the server for the initial data, then fetch the same data on the client with RTK Query.

• This should solve most of my problems: SEO, fast initial render, and RTK Query client-side state management.
• I am not sure calling the same api call twice is what I want.

3. Fetch data from the server, then store the data in redux store.

• I personally wouldn't do this because this doesn't guarantee the data in the client-side is truthful.

Notes

• Of course I checked out this RTK Query page with Nextjs. The document itself was pretty helpful, but I couldn't find the answer I wanted. If I missed the point, please let me know. https://redux-toolkit.js.org/usage/nextjs
• In the 'old' Nextjs pages land, I could fetch data with getServerSideProps, initialize the state, and could re-hydrate on render. I can't seem to think of the most 'elegant' way to handle 'fetch from the server and mutate on the client' in Nextjs + RTK Query combo.

Please feel free to give any suggestions or feedback. I am sure this is not RTK Query only problem, but rather the new wave of RSC and Nextjs app dir problem. I understand where they are heading, but I just don't want to give up the power of RTK Query or other client-side libraries, really.

Cheers.