728x90

저 같은 경우 해당 현상은
SSR인 Nextjs에서 emtion을 사용하여 styled 컴포넌트 작성시에
:first-child 를 사용했기 때문이였습니다.
서버사이드 렌더링에서 이런 Emotion이나 styled-components 같은
CSS-in-JS 라이브러리를 사용할때, 위와 같은 문제가 발생할 수 있습니다.
해결 : first-child를 first-of-type으로 변경해준다.
근데.. sass나 css파일에서
first-child는 아무 문제 없었던 것 같은데..?!
그건 해당 파일이 처리되는 시점이 달라서 입니다.
sass나 css파일은 빌드타임시에 처리됩니다.
때문에 서버와 클라이언트에서 같은 스타일을 적용시킵니다!
반면 CSS-in-JS는 런타임에 동적으로 생성하기 때문에
서버와 클라이언트 HTML구조가 다르면 다르게 작동할수 있어서
위와 같은 에러가 나오는것이라고 합니다.
참고 : GPT와의 딥토크 + https://inpa.tistory.com/entry/%F0%9F%8C%9F-first-child-first-of-type
728x90
'Front-end' 카테고리의 다른 글
어떤 npm package를 많이 쓸까? npm package 한눈에 비교하기 (0) | 2024.07.12 |
---|---|
Recoil, 서당개도 입학과 동시에 할수있는 상태관리 (1) | 2024.07.11 |
[Next.js] App router 폴더구조 알아보기 (0) | 2024.07.02 |
로그인 후, 기존페이지로 리다이렉트 하기 (0) | 2024.06.29 |
TypeError: Cannot read properties of null (reading 'useContext') useContext (feat. useLocation 이노오옴!) (0) | 2024.06.28 |