728x90

 

저 같은 경우 해당 현상은

SSR인 Nextjs에서 emtion을 사용하여 styled 컴포넌트 작성시에

:first-child 를 사용했기 때문이였습니다.

서버사이드 렌더링에서 이런 Emotion이나 styled-components 같은

CSS-in-JS 라이브러리를 사용할때,  위와 같은 문제가 발생할 수 있습니다.

 

해결 : first-child를 first-of-type으로 변경해준다.

 

 


 

 

근데.. sasscss파일에서

first-child는 아무 문제 없었던 것 같은데..?!

 

그건 해당 파일이 처리되는 시점이 달라서 입니다.

sass나 css파일은 빌드타임시에 처리됩니다.

때문에 서버와 클라이언트에서 같은 스타일을 적용시킵니다!

반면 CSS-in-JS는 런타임에 동적으로 생성하기 때문에 

서버와 클라이언트 HTML구조가 다르면 다르게 작동할수 있어서

위와 같은 에러가 나오는것이라고 합니다.

 

 

 


참고 : GPT와의 딥토크 + https://inpa.tistory.com/entry/%F0%9F%8C%9F-first-child-first-of-type

 

 

 

 

 

 

 

728x90

+ Recent posts