next.js 리액트 스타일 깨지는 현상?

Question

안녕하세요~next.js를 사용하는 중이고 리액트 관련 라이브러리를 사용하고 있는데요. 라이브러리는 캐러셀을 구현해주는 커스텀 라이브러리입니다. npm에서 받은거는 아니고 내부 라이브러리에요.
페이지에 캐러셀이 있고 이미지들이 한 6장 정도 자동으로 흘러가는 형태에요. 대부분의 css는 라이브러리에서 제공하고 있어요.

문제는 페이지를 url을 통해서 접근하면 캐러셀의 스타일이 깨지더라구요. 특별히 이상한 에러가 잡히는것은 없는데 스타일만 깨져서 이미지가 너무 크게 보이거나 아예 안보이거나 하더라구요.

근데 또 신기한거는 서비스의 다른 페이지를 접근했다가 다시 돌아오면 정상적으로 스타일이 입혀져있어요. 혹시 이런 현상을 겪어보신분 있나요? 있다면 어떤 부분이 원인이 되는지 알려주시면 고맙겠습니다~

강경석(핸디) · Answer

음.. 코드를 보지못해서 정확한 답변은 어려우나 가능성 있는 시나리오가
캐러셀 css를 import 하는 부분이 누락되지 않았나 싶습니따.

일반적으로 외부 라이브러리의 css의 경우 app 또는 document에 스타일을 가져옵니다.
그래서  url로 직접접근하는 페이지에서도 해당 페이지가 먼저 호출되기때문에 css를 가져오게 됩니다.

하지만 위에 컴포넌트가 아니고 일반적인 경로의 main 페이지 컴포넌트에서 스타일을 호출하는 상황이라면
직접 특정 페이지로 바로 접근할 경우 main이 호출되지 않아 캐러셀 css가 import되지 않을수 있습니다.

뭔가 말로만 설명하려니 난잡하네요.
next.js의 layout 개념도 같이 살펴보시면 좋아요

손정현 · Answer

안녕하세요!
캐러셀 라이브러리가 혹시 SSR을 고려하고 만들어진 라이브러리인가요?
캐러셀 컴포넌트를 서버에서 렌더해서 입힌 css와 브라우저에서 렌더해서 입힌 css 간 차이로 생기는 이슈 같기도 하네요!

url을 직접 접근하면 스타일이 깨짐 -> 서버 사이드 렌더된 html이 이상하게 나옴
서비스 내에 페이지 이동하면 정상적으로 보임 -> 서비스 내에 이동이면 클라이언트 사이드 라우팅일 가능성이 높고 브라우저에서 렌더를 하니 정상적으로 스타일이 적용됨

이렇게 두 부분만 가지고 추측한거긴해서, 정확한건 코드와 구현이 어떻게 되어있는지 있어야 알 수 있을 것 같아요!