RTK Query and Next 13 `app` dir / React Server components: status and discussion

[markerikson]

We're getting a lot of questions about whether RTK Query works with RSCs.

Quoting Lenz at https://twitter.com/phry/status/1666553972075687938 :

There's a lot of nuance. In client components, it effectively already works, but not for SSR. In RSC, it's probably not a particularly useful/good idea. In Client component SSR we need support for two things: streaming SSR data transport and a good suspense story.

Of those last two things, the first right now can only be solved in a very unsatisfying way with a Next-specific api. The latter would probably build on top of use, but it would be a "temporary" api design until React would add use support for observables (if they ever do).

We're also looking at tweaking RTKQ + React-Redux to not throw errors related to calling createContext in an RSC environment.

[markerikson]

Related issues:

• bug: React.createContext is not defined on Redux with NextJS SSR implementation react-redux#2028
• Error: (0 , _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect) is not a function react-redux#2046
• TypeError: (0 , _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect) is not a function react-redux#2049
• Using RTKQUERY in the new Nextjs App Router for server components  #3581
• Is RTK-Query compatible with Nextjs App Router? #3585
• ReduxToolkit Error with Nextjs.13 and typescript #3586

[markerikson]

General notes:

• Make sure you're using React-Redux 8.1.2, which has fixes to avoid errors in an RSC environment
• Follow guidelines at https://nextjs.org/docs/getting-started/react-essentials#rendering-third-party-context-providers-in-server-components
• See the Next with-redux example, which has been updated to show the app directory: https://github.com/vercel/next.js/tree/canary/examples/with-redux

[EvHaus]

@markerikson I'm having issues with getting Redux state hydration working in Next 13. My strategy from Next 12 & pages router doesn't work with the app router. And the with-redux doesn't include a hydration example.

Are you aware of this already? If not -- should I open a new issues to dig into this further, or would you prefer a comment in this ticket instead?

[markerikson]

@EvHaus : per this thread, we generally don't have any specific support for the App Router + Redux stuff atm, beyond "if you intend to use Redux on the client side, make sure to render <Provider> in a client component".

What are you actually trying to accomplish?

[EvHaus]

I want the server to fetch data from a database and return it to the client along with the SSR HTML so that Redux state can be hydrated on the client without the client needing to make its own additional fetches. Very similar to what https://github.com/kirill-konshin/next-redux-wrapper is doing.

[markerikson]

Yeah, we have no actual answer for that with the App Router right now, largely due to the lack of API features needed to make that even possible. See Lenz's article here for some more details:

• https://phryneas.de/react-server-components-controversy

@phryneas can maybe chime in more, but right now that's not feasible as far as I know.

[markerikson]

Note that we now have official docs on how to set up Redux with Next.js and the App Router correctly:

• https://redux-toolkit.js.org/usage/nextjs

[browynlouis]

Thanks for the documentation..it was really needed.
Although there's a statement there that says

only use Redux for globally shared, mutable data

I do plan to use Redux for global data, but probably not mutable.

For example, when my application loads, I plan to fetch the app settings and store the data in the redux store so I can have it readily accessible for client components usage.

What's your take on this please ?