Next.js Discord

Discord Forum

Strategic Dilemma: Redux Integration with Next 13’s Server Components

Answered
Honey bee posted this in #help-forum
Open in Discord
Avatar
Honey beeOP
Currently, I am undertaking the task of migrating one of my applications from CRA to Next 13, but I have encountered a problem. The project presently employs Redux for state management, and I am unable to modify this approach. If I continue with Next 13, I will be compelled to incorporate Server Components with Redux, which appears to be counterproductive since Server Components are unable to utilize any React hooks, including useContext—essential for Redux State Management. My reason to converting the site is that I want to optimize SEO as Client Side Rendering isn't good for SEO. What would you recommend? Should I persist with this method and adapt the app to Next 13, despite it conflicting with Next 13 paradigms? Or, is there an alternative solution more suited to my needs, such as Vite SSR, Remix, Qwik, or another tool?
Answered by fuma 💙 joulev
If you can’t leave redux anyway, you may consider splitting the whole page into a client component, while the page itself remains a server component. In the page. pre-fetch data used for initial render and pass them to client components. Don’t worry, both server and client components are pre-rendered on the server (SSR) but only client components are shipped to client.

Of course you can use other solutions like Vite and Remix if you prefer. :A_:
View full answer

2 Replies

Avatar
fuma 💙 joulev
If you can’t leave redux anyway, you may consider splitting the whole page into a client component, while the page itself remains a server component. In the page. pre-fetch data used for initial render and pass them to client components. Don’t worry, both server and client components are pre-rendered on the server (SSR) but only client components are shipped to client.

Of course you can use other solutions like Vite and Remix if you prefer. :A_:
Answer
Avatar
fuma 💙 joulev
In addition, you can search for some examples using Redux + App Router. It’s not really a bad idea