step to convert from client to server component

1. remove "use client" from top

2. use "useServerState" instead of "use client" hook

// Example code to use useServerState hook 
import { useServerState } from 'next/server';

export default function MyServerComponent() {
    const [count, setCount] = useServerState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

using redux with nextjs + SSR

disadvantage

source :- https://medium.com/@mak-dev/zustand-with-next-js-14-server-components-da9c191b73df

solution

Nest of server side component inside client side component , or component side code inside server component And use state redux inside client side only quick video to use server component inside client comonent

use useserverState hook ( as i shown above ) instead of using redux hook for server side component