[next.js] 서버사이드 렌더링을 하는 페이지에서 Swiper.js 컴포넌트를 사용하면 스타일이 깨집니다.

Question

안녕하세요 next.js에서 Swiper.js 라이브러리를 사용할 때 발생하는 이슈 관련해서 도움을 받고자 질문드립니다.

SSR 페이지에서 Swiper 컴포넌트를 사용하면 아래와 같은 에러가 나오면서 스타일이 깨지는 이슈가 있습니다. 
Warning: Extra attributes from the server: style

해당 이슈를 해결하기 위해 dynamic import로 Swiper를 사용하는 컴포넌트를 감싸고 SSR:false를 적용했는데요. 이렇게 하면 스타일 이슈는 해결되지만, 해당 컴포넌트가 서버렌더링 되는 html에 포함되지 않아 SEO 이슈가 있을까 걱정됩니다.

혹시 이런 에러를 겪어본 분이 있을까요? 
좋은 해결책이나 원인을 아는분들 답변 부탁드립니다! 감사합니다.

성원 · Answer

안녕하세요:)

Warning: Extra attributes from the server: style 에러는 보통 서버사이드 렌더링된 태그와 React hydration이후 브라우저에서 랜더링되는 태그가 미스매치될 때 발생합니다.

따라서 Swiper 컴포넌트를 사용하는 부분에서 두 렌더링시 상이한 태그가 있는지 확인해야 정확한 해결책을 떠올릴 수 있을 것 같습니다.

태그를 확인할 수는 없지만 질문을 바탕으로 두 가지정도 해결방법을 떠올려봤는데요
1. Swiper.js의 observe, observeParents옵션 이용
2. Swiper.js를 사용하지 않고 컴포넌트를 구현한다.

1번의 경우 Swiper 컴포넌트의 observe props를 사용하면 스타일의 변경이나 자식 컴포넌트의 삭제, 추가 이벤트가 있을 때 컴포넌트를 초기화 해줍니다. 따라서 SSR로인해 변경된 스타일을 감지하여 클라이언트 사이드 렌더링시에 style을 다시 리셋할 수 있습니다. (이슈는 발생하지만 초기화를 통해 해결)

2번의 경우 공수가 많이 들겠지만 이슈는 발생하지 않겠네요

참고 swiper.js docs (https://swiperjs.com/swiper-api)