[Next js, Recoil] Error: ReactDOMServer does not yet support Suspense.

recoil/userState.js 파일

import axios from "axios";
import { atom, selector } from "recoil"; 

export const userState = atom({
  key: "userState",
  default: [],
});

export const getUserState = selector({
  key: "userStateRequest",
  get: async ({ get }) => {
    try {
      const res = await axios.get("/apiaddress");
      console.log("성공", res.data);
      return res.data;
    } catch (e) {
      return [];
    }
  },
  set: ({ set }, newValue) => {
    set(userState, newValue);
  },
});

  const [userData, serUserData] = useRecoilState(getUserState);

selector 에서 반환되는 값은 필요한 값만 반환해야한다.
CSR에서는 axios의 res 값을 모두 반환해서 사용해도 문제가 없었는데 next.js에서는 모두 반환하면 에러가 발생

 const users = useRecoilValueLoadable(getUserState);

코드 추가

Next js 12 이하 버전에서는 Suspense를 지원하지 않기 때문에 useRecoilValueLoadable 를 사용해야한다