reactjsreduxnext.jsserver-side-renderingnext-redux-wrapper

Did I correctly understand the behaviour of next-redux-wrapper?


Tried to make counter with next-redux-wrapper, redux, Next.js.

I've watched that when I clicked few counter button, then move to other page and came back to counter page, getServerSideProps initializes the counter into 3 again. I understand this library as it helps merge the result of dispatch during SSR to client redux store, but does not sync client store state to server redux store.

Did I understand it correctly?

Here is my code of counter app

index.tsx

export const getServerSideProps = wrapper.getServerSideProps(
    (store) => async () => {
        store.dispatch(add(3));

        return {
            props: {},
        };
    }
);
const index = (props: any) => {
    const count = useSelector((state: AppState) => state.counter.count);
    const dispatch = useDispatch();
    return (
        <>
            <Link href='/book'>// move to other page then come back
                <a>move</a>
            </Link>
            <div>{count}</div>
            <button onClick={() => dispatch(add(1))}>+</button>
            <button onClick={() => dispatch(deleter(2))}>-</button>
        </>
    );
};

Solution

  • It will help you hydrate data from the server on the client, but since SSG-rendered data is created probably days before the request and even SSR has no knowledge of what is going on on the client, there is no way of syncing data from client to server.