How can I use redux saga function action inside getServerSideProps function of nextjs

Question

in next.js, i want to operate the saga function inside getServerSideProps, it is dispatched to the serverSide store, but there is a problem that it is not shared to the client store when the hydrate action is executed. My guess is that rehydrate runs before takeEvery runs, is it a version issue?

I want to move the asynchronous logic to sagaFunction and handle it.

it's my code

//saga.ts
export function* getProductDetailSaga({ payload }: ReturnType<typeof getProductDetailAction>) {
  try {
    const { data } = yield* call(getProductDetail, payload);
    yield put(setFetchedProductDetails(data.productDetail));
  } catch (error) {
    console.error(error);
  }
}

export default function* productDetailSaga() {
  yield all([
    takeEvery(getProductDetailAction.type, getProductDetailSaga),
}

//[productId].tsx
export const getServerSideProps = wrapper.getServerSideProps((store) => async (ctx) => {
  const { productId } = ctx.query;
  const {
    osCode,
    deviceId,
    session,
  } = store.getState().user;

  store.dispatch(
    getProductDetailAction({
      osCode,
      deviceId,
      session,
      productId,
    })
  );

  store.dispatch(END);
  await store.sagaTask.toPromise();
});

i think END action and sagaTask are not functioning properly.

but this works fine.

export const getServerSideProps = wrapper.getServerSideProps((store) => async (ctx) => {
  const { productId } = ctx.query;
  const { osCode, deviceId, session } = store.getState().user;
  const { data } = await getProductDetail({
      osCode,
      deviceId,
      session,
      productId,
    });
  
store.dispatch(setFetchedProductDetails(data.productDetail || null));
});