ssr을 이용해서 데이터를 불러오고 그데이터를 redux를 이용해서 전역 state에 저장하려고 한다

기존의 nextjs와 redux를 사용했을때는 redux-next-wrapper를 사용하였는데 nextjs13 beta버전에서는 아직 지원이 되지 않아 사용할수가 없다 따라서 직접 구현해 주어야한다.

user데이터의 경우 store가 만들어지기 이전에 initalState를 넣어주면 되는것이므로 서버에서 데이터를 받은후 store에 preloadedState로 넣어주었다

// 서버컴포넌트에서 데이터를 받아옴
async function getUserInfo() {
  const header = headers();
  const Cookie = header.get("Cookie");
  const res = await fetch("<http://localhost:3065/user>", {
    headers: Cookie ? { Cookie } : undefined,
  });
  return res.json();
}

//받은 데이터를 Providers로 넘겨줌
const Providers = ({ me, children }: { me: User; children: ReactNode }) => {
  const queryClient = new QueryClient();
  return (
    <Provider store={store(me)}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </Provider>
  );
};

// store에서 받은 데이터를 preloadedState로 넣어줌
export const store = (userInfo: any) => {
  console.log(userInfo);
  return configureStore({
    reducer: {
      global: globalSlice.reducer,
    },
    preloadedState: { global: { userInfo: userInfo } },
  });
};

찾아본바에 의하면 ssr로 받은 데이터를 redux로 주입할때는 window객체의 redux **PRELOADED_STATE** 를 이용해서 사용한다. 하지만 xss공격에 취약하기 떄문에 권장하지는 않는다고….

비하인드

해당 방법은 react-query를 적용함에 따라 초기 데이터를 redux에서 react-query로 바뀌었고 해당 방법은 사용하지 않았다.