Prop `style` did not match 에러 해결

Next.js에서 자동 + 수동 + 무한 슬라이드를 구현하는 도중 jsx안에 inline으로 transform을 넣었더니 다음과 같은 에러가 발생했다.

Prop style did not match. Server: transform~ Client: transform~

React였으면 나지 않았을 에러같지만 Next.js는 서버사이드렌더링을 하는 경우 서버에서 내려주는 html과 클라이언트 쪽의 html이 일치하지 않으면 에러가 발생한다.

이와 비슷하게 Hydration UI 에러도 있었다.

stackoverflow의 도움으로 다음처럼 해결했다.

// 에러가 발생한 곳
// width와 height가 useMediaQuery = isDesktop일 때 서버와 클라이언트에서의 상태가 다름

return (
	<div
          className={styles.slide}
          ref={slideRef}
          style={{
            width: `${ 
              (isDesktop ? 920 : 592) *
              COPIED_NUM
            }px`,
            transform: `translateX(${ 
              -1 *
              (isDesktop ? 920 : 592) *
                slideIndex)
            }px)`,
            transition: 'all 500ms ease-in-out',
          }}
        >
        ...
        </div>
)

// 에러 해결
// isServer라는 플래그를 주어 처음에 렌더링할 때 
// 유일하게 에러가 발생하던 isDesktop인 경우에만 true로 설정, 그 외에는 false 설정

  const [isServer, setIsServer] = useState(true);

  useEffect(() => {
    if (isDesktop) {
      setIsServer(true);
    } else {
      setIsServer(false);
    }
  }, []);
  
  ...

return (
	<div
          className={styles.slide}
          ref={slideRef}
          style={{
            width: `${
              (isServer || isDesktop ? 920 : isTablet || !isServer ? 592 : 0) *
              COPIED_NUM
            }px`,
            transform: `translateX(${
              -1 *
              ((isServer || isDesktop ? 920 : isTablet || !isServer ? 592 : 0) *
                slideIndex)
            }px)`,
            transition: 'all 500ms ease-in-out',
          }}
        >
)

설정하고 나니 에러가 사라졌다