하이드레이션이란 무엇인가

하이드레이션은 클라이언트 측 Angular 앱이 서버에서 렌더링된 HTML을 재사용하면서 기존 DOM에 이벤트 리스너와 상태를 연결하는 과정입니다. 기존 DOM을 버리고 다시 렌더링하지 않습니다.

기존 SSR은 파괴적 하이드레이션을 사용했습니다. 클라이언트가 서버 DOM을 지우고 처음부터 다시 렌더링했기 때문에 화면에 깜박임이 발생하고 서버의 작업이 버려졌습니다.

최신 Angular는 비파괴적 하이드레이션을 수행합니다. 기존 DOM을 순회하고 컴포넌트 트리와 대조한 뒤 노드를 재사용합니다. 깜박임이 없고 작업량이 줄어 성능이 향상됩니다.

서버 HTML을 재사용하면 가장 큰 콘텐츠가 계속 표시되어 LCP에 도움이 되고, 다시 렌더링할 때 발생하는 레이아웃 이동을 피하여 CLS에도 도움이 됩니다. 다시 그리지 않고도 앱을 상호작용 가능한 상태로 만들 수 있습니다.

1단계: 서버가 HTML을 렌더링하여 전송합니다. 2단계: 브라우저가 JS를 다운로드하고 Angular를 시작한 다음 기존 마크업을 하이드레이션하여 상호작용이 가능하게 만듭니다.

하이드레이션은 클라이언트 컴포넌트 트리가 서버가 생성한 것과 같은 구조를 생성한다고 가정합니다. 둘이 다르면 Angular가 하이드레이션 불일치를 보고합니다.

직접적인 DOM 조작, 마크업을 변경하는 브라우저 전용 분기, 잘못된 HTML 중첩, 템플릿의 Math.random()이나 Date.now()처럼 결과가 일정하지 않은 콘텐츠가 불일치를 일으킵니다.

SSR 중에는 명령형 방식으로 DOM을 조작하지 마십시오(예: Angular 외부에서 innerHTML 사용). 클라이언트와 서버가 일치하도록 DOM 관리를 Angular에 맡기십시오.

DOM을 변경하는 서드파티 위젯처럼 실제로 하이드레이션할 수 없는 컴포넌트는 ngSkipHydration을 사용해 하이드레이션 대상에서 제외하십시오. 그러면 Angular가 해당 하위 트리만 다시 렌더링합니다.

하이드레이션은 재사용할 서버 렌더링 HTML이 있을 때만 적용됩니다. 순수한 CSR 앱에는 하이드레이션할 대상이 없으며, 하이드레이션은 SSR 과정에서 클라이언트 측을 담당합니다.

하이드레이션은 전체 방식(앱 전체를 로드할 때 하이드레이션)과 점진적 방식(필요할 때 부분적으로 하이드레이션)으로 나뉩니다. 올바른 전략을 선택하는 것이 성능의 핵심이며, 이후 레슨에서 다룹니다.

하이드레이션에 대한 이해도를 확인해 보세요.

하이드레이션은 서버 HTML을 클라이언트에서 비파괴적으로 재사용하여 LCP와 CLS를 개선합니다. 수동 DOM 수정이나 비결정적 마크업으로 인해 불일치가 발생할 수 있으며, 이때 ngSkipHydration을 예외 처리 수단으로 사용할 수 있습니다. 하이드레이션은 SSR 과정에서 클라이언트 측을 담당합니다.