Angular Hydration은 SSR 사용 시 정적 HTML을 로드한 뒤 이벤트 리스너와 인터랙티브 기능을 연결하여 페이지를 동적으로 만드는 과정이다.

동적인 기능을 나중에 붙임으로써 초기 페이지 로딩 시간을 단축하는 장점이 있는데, 제목에서 언급한대로 중첩된 <a>태그 사용 시 hydration 과정에서 오류가 발생했다.

오류가 발생하는 이유는 간단했다.

HTML 스펙 상 <a> 태그 안에 또 다른 <a> 태그는 잘못된 사용이기 때문이다.

Angular hydration은 DOM 구조를 엄격하게 검증하기 때문에 이런 잘못된 구조의 HTML을 사용하는 것은 hydration의 오류를 일으킨다.

Angular 공식 GitHub에서도 동일한 답변을 제공하고 있는데 한 가지 이상한 점은 스펙 상 <a> 태그는 중첩된 <a> 태그 뿐만 아니라 <button>과 같은 인터랙티브 요소는 모두 사용해선 안된다는 것이다.

The a element can be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links).

위 내용은 HTML 스펙 문서에서 가져왔는데 마지막에 보면 버튼과 다른 링크는 내부에 포함해선 안 된다고 써져있다.

그런데 내 블로그에는 <a> 태그로 <button> 태그를 감싼 부분이 여럿 있는데 왜 해당 부분에선 hydration 오류가 발생하지 않는걸까.. 🤔

의문점이 아직 남아있긴 하지만 어쨌든 <a> 태그 안에 <a> 태그를 사용하면 안되는 걸로 !