css | first-child를 사용하면 안 되는 이유

작업하다가
The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type"
이런 에러 메세지가 떴다.

이유:

:first-child가 서버 측 렌더링(Server-Side Rendering, SSR)에서 문제가 될 수 있는 이유는 클라이언트와 서버 간에 초기 HTML 마크업을 동일하게 유지하기 어렵기 때문입니다.

:first-child는 첫 번째 자식 요소를 선택하는 CSS 선택자입니다. 이것은 서버 측에서 HTML을 생성할 때 해당 요소가 첫 번째 자식인지 여부를 확인하는데 사용됩니다. 그러나 클라이언트 측에서 JavaScript 또는 다른 동적인 로직에 의해 DOM이 변경될 수 있습니다.

서버 측에서 렌더링된 초기 HTML에서는 첫 번째 자식이 특정 요소이지만, 클라이언트 측에서 이 초기 상태가 변경되면서 첫 번째 자식이 다른 요소로 변경될 수 있습니다. 이 경우, :first-child가 서버에서는 참이었지만 클라이언트에서는 거짓이 되어 스타일이 예기치 않게 적용될 수 있습니다.

이런 이유로 서버 측 렌더링에서는 :first-child보다는 :first-of-type을 사용하는 것이 더 안전합니다. :first-of-type은 해당 유형의 첫 번째 요소를 선택하므로 서버와 클라이언트 간에 일관성을 유지할 수 있습니다.