carousel 은 CSR 로 구현하자

메인 페이지의 배너를 히어로 캐러셀로 넣기 위해서

많이 쓴다는 embla 캐러셀을 사용하려 했으나 아래의 에러 발생...

해당 캐러셀의 공식 홈페이지에서 react 에서의 사용법으로 준 스켈레톤 코드 자체에 useRef 가 사용되어 있어서, hook을 사용하기 위해서는 CSR 을 적용하기 위해서 "use client" 를 사용해야만 했다.(Next.js 13버전의 CSR 구현법...)

근데, 메인 페이지 배너를 csr 로 만들고 싶지 않았으므로... 그냥 ssr 로 구현가능한 다른 라이브러리를 찾아보기로 했다

swiper slider 를 사용하였으나, 같은 에러가 발생하였다

그냥 "use client" 를 사용해서 CSR로 구현하면 된다지만,
히어로 캐러셀은 SSR로 만들고 싶었기에 더 찾아보았더니 아래의 글을 찾게 되었다

https://annacoding.com/article/7g4lj7ti1mVxKD20qnXlsg/React-Multiple-Items-Carousel-with-Server-Side-Rendering-Implementation-Part-one

React Multiple Items Carousel with Server Side Rendering Implementation Part one - Anna Coding

위 링크에서 알게된 내용을 요약하자면, 대부분의 캐러셀과 슬라이더 라이브러리에서는 CSR 사용을 전제로 지원한다는 점이었다.

이유는 유저 클라이언트 창의 실제 크기를 알아야 랜더링이 가능하기 때문이다
위 링크에서는 아래의 그림을 예시로 설명하고 있다

https://annacoding.com/article/7g4lj7ti1mVxKD20qnXlsg/React-Multiple-Items-Carousel-with-Server-Side-Rendering-Implementation-Part-one

위 링크에서는 몸을 비틀어가며 CSR 이 아닌, SSR 로 캐러셀을 직접 구현하는 법을 말하였으나,
난 이 링크에서 오히려 "Next.js 에서도 캐러셀을 CSR 로 쓰는게 정석이란다!" 라고 느꼈고

그렇게 됐습니다 하하

그냥 처음 사용했던 embla 캐러셀 컴포넌트를 CSR 로 구현하기로 하였다