[Next.js] SSR에서 recoil-persist 사용하기

recoil-persist 라이브러리는 브라우저의 메모리에 state를 저장해서 새로고침을 해도 브라우저 메모리에 저장했던 state값을 불러와서 state를 유지 시킨다. 브라우저 메모리는 localStorage, sessionStorage, cookie가 있는데 recoil-persist는 localStorage 또는 sessionStorage에 데이터를 저장할 수 있다. 

 

근데 Next.js에서 recoil-persist를 사용하려면 약간의 문제가 있다.

Next.js는 Serve Side Render이 끝난 후에 Client Side Render 가 발생한다.

하지만 Serve Side Render가 진행 중일 때는 브라우저 전역 객체인 window, document를 사용할 수 없다. localStorage, sessionStorage는 window 객체를 통해서 접근을 해야하기 때문에 다른 방식으로 recoil-persist를 사용해야한다. 

 

다행히 npm recoil-persist에 SSR인 경우, 어떻게 사용해야하는지 친절하게 설명이 되어있다.

import { recoilPersist } from 'recoil-persist'

const { persistAtom } = recoilPersist();

const defaultValue = [{ id: 1 }]

export const recoilTest = atom<{ id: number }[]>({
  key: "recoilTest",
  default: defaultValue,
  effects_UNSTABLE: [persistAtom],
});

export function useSSR() {
  const [isInitial, setIsInitial] = useState(true);
  const [value, setValue] = useRecoilState(recoilTest);

  useEffect(() => {
    setIsInitial(false);
  }, []);

  return [isInitial ? defaultValue : value, setValue] as const;
}


export default function Component() {
  const [text, setText] = useSSR();

}

 

위처럼 사용하면 된다. 위 코드에서는 useEffect를 통해서 server side render가 끝난 것을 확인한 후에야 recoilTest의 value에 접근하도록 해서 ReferenceError: localStorage is not defined 에러를 방지도록 한다.

 

 

사실 npm에서 알려준 방법에는

import { recoilPersist } from 'recoil-persist'

const { persistAtom } = recoilPersist({
  key: 'recoil-persist', // this key is using to store data in local storage
  storage: localStorage, // configure which storage will be used to store the data
  converter: JSON // configure how values will be serialized/deserialized in storage
})

 

persisAtom을 위처럼 사용하라고 명시되어있다. 하지만 storage: localStorgae 속성을 안붙여도 기본적으로 localStorage에 저장을 하고 속성을 붙이면 ReferenceError: localStorage is not defined 와 같은 에러가 발생하므로 나는 빼줬고 그래도 localStorage에 잘 저장되는 것을 확인하였다.

 

Reference

npm_recoil_persist

recoil-persist