Next.js :nth-child 에러

오류 내용

pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type".

사이드 프로젝트 퍼블리싱을 하다가 console에 위와 같은 에러가 발생했다.

왜 위와 같은 에러가 뜰까?

Next.js는 SSR을 수행할 때, "nth-child"나 "first-child" 가상 클래스를 사용할 경우 문제가 발생한다.

"nth-child"나 "first-child" 가상 클래스는 DOM의 전체 구조를 기반으로 일치하는 요소를 선택한다.

SSR은 초기 페이지 로딩시 서버에서 페이지를 렌더링하고 클라이언트에 전달하기 때문에

DOM구조가 완전히 만들어지지 않는 경우가 있다.

":nth-child" 가상 클래스는 DOM의 전체 구조를 기반으로 선택된 요소를 찾는데 사용된다.

하지만 서버 측 렌더링 중에는 클라이언트 측과는 달리 완전한 DOM 구조를 알 수 없으므로 이러한 선택자를 사용하면 정확한 결과를 얻을 수 없거나 예기치 않은 동작이 발생할 수 있다.

위 문제를 해결하기 위해서는 nth-child와 같이 가상 클래스를 선택하지않고,

nth-of-type, first-of-type로 변경하여 사용하는 것이 권장되며, 렌더링 시에도 안정적인 결과를 얻을 수 있다!