react-snowfall 라이브러리를 사용하던 도중 다음과 같은 오류가 발생했다. 해결 방법으로 useLayoutEffect가 클라이언트 사이드에서만 독점적으로 렌더링되어야 한다는 부분이 언급된 걸 보면, Next.js의 서버 사이드 렌더링 방식으로 인해 오류가 발생된 듯하다.
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See
https://reactjs.org/link/uselayouteffect-ssr for common fixes.
해결 방법으로 문제가 된 Snowfall 컴포넌트를 예외적으로 NoSSR 컴포넌트로 감싸 서버 사이드 렌더링을 강제로 중지시켰다.
반응형
