I am trying to:

1. get server-sided headers (req.headers.x-my-custom-header)
2. getInitialProps (_document) dispatch x-my-custom-header to store (server-sided) <- PROBLEM
3. rehydrate x-my-custom-header to client

_document.tsx:

MyDocument.getInitialProps = async (context: DocumentContext) => {
  const initialProps = await Document.getInitialProps(context);
  const isServer = context.req;
  if (isServer) {
    // const site = context.req?.headers['x-site']
    store.dispatch(setSite('foo')); // <- setting state to 'foo'
  }
  const initialState = store.getState();
  console.log('initialState', initialState); // <- has 'bar' in it
  return {
    ...initialProps,
    initialState,
  };
};

my slice

import { createSlice, Slice } from '@reduxjs/toolkit';

export const name = 'settings';

export enum Sites {
  foo = 'foo',
  bar = 'bar',
}

export type SettingsState = {
  site: Sites;
};

const initialState: SettingsState = {
  site: Sites.bar,
};

const slice: Slice<SettingsState> = createSlice({
  name,
  initialState,
  reducers: {
    setSite(state, action: { type: string; payload: Sites }) {
      state.settings.site = action.payload;
    },
  },
});

export const { setSite } = slice.actions;

export default slice.reducer;

Any ideas what could be the problem here?