히어로 캐러셀로 메인 페이지에 배너를 배치하려면
많이 사용한다고 하는 엠블라 캐러셀을 사용하려고 했는데 아래와 같은 에러가 납니다…
UseRef는 스켈레톤 코드 자체에 사용되었는데, 이는 캐러셀 공식 홈페이지에서 리액션 use로 주어졌기 때문에 hook을 사용하기 위해서는 “use client”를 사용하여 CSR을 적용해야 했습니다(Next.js 버전 13 CSR-implementation). .. .)
그런데 csr로 메인 페이지 배너를 만들고 싶지 않아서… 그냥 ssr로 구현할 수 있는 다른 라이브러리를 찾아보기로 했습니다.
스와이퍼 슬라이더를 사용했지만 동일한 오류가 발생했습니다.
“클라이언트 사용”을 사용하여 CSR을 구현할 수 있습니다.
SSR을 이용해서 히어로 캐러셀을 만들고 싶어서 계속 검색하다가 다음 글을 찾았습니다.
서버측 렌더링 구현으로 여러 요소의 캐러셀에 응답, 1부 – Anna Coding
이 기사에서는 React를 사용하여 다중 요소 및 서버 측 렌더링을 지원하는 자체 캐러셀 구성 요소를 만들고 테스트를 추가하고 마지막으로 NPM에 게시하는 방법을 보여줍니다.
annacoding.com
위 링크에서 배운 내용을 요약하면 대부분의 캐러셀 및 슬라이더 라이브러리는 CSR 사용을 요구 사항으로 지원합니다.
그 이유는 렌더링을 위해 사용자 클라이언트 창의 실제 크기를 알아야 하기 때문입니다.
위 링크에서 아래 이미지를 예로 설명합니다.
위 링크에서 몸을 비틀어 CSR이 아닌 SSR을 직접 사용하여 캐러셀을 구현하는 방법을 알려드렸습니다.
차라리 “또한 Next.js에서는 회전 목마를 CSR로 사용하는 것이 표준입니다!“나는 느꼈다
CSR과 함께 처음으로 사용한 embla carousel 컴포넌트를 구현하기로 했습니다.