아일랜드 아키텍처: 선택적 하이드레이션

제이슨 밀러가 2020년에 이름 붙인 아일랜드 아키텍처는 웹 페이지를 상호작용 가능한 고립된 "아일랜드"가 삽입된 대부분 정적인 HTML로 다룹니다. 정적인 HTML의 바다는 브라우저로 그대로 전송됩니다. 상호작용 가능한 아일랜드만 JavaScript를 다운로드하고 실행하므로 JavaScript 전송량은 실제 상호작용 정도에 비례합니다.

각 아일랜드는 독립적으로 하이드레이션되는 구성 요소입니다. 서버는 페이지의 나머지 부분과 함께 아일랜드의 초기 HTML을 렌더링합니다. 아일랜드의 JavaScript가 로드되면 해당 구성 요소 하위 트리만 하이드레이션합니다. 아일랜드를 둘러싼 HTML은 JavaScript가 전혀 건드리지 않으므로 진정한 정적 콘텐츠로 유지됩니다.

아일랜드 아키텍처를 사용하는 블로그 게시물 페이지에서는 단일 좋아요 버튼 아일랜드에 필요한 JavaScript 전송량이 5킬로바이트일 수 있습니다. 같은 페이지를 리액트 SPA로 구축하면 전체 페이지를 하이드레이션하기 위해 200킬로바이트 이상의 JavaScript를 전송할 수 있습니다. 아일랜드 방식에서는 전송량이 페이지 크기가 아니라 상호작용 정도에 비례합니다.

대표적인 아일랜드 아키텍처 프레임워크인 아스트로는 한 페이지에서 서로 다른 프레임워크로 만든 아일랜드를 지원합니다. 리액트 아일랜드 옆에 뷰 아일랜드를 배치하고 그 옆에 순수 JavaScript 아일랜드를 배치할 수 있습니다. 각 아일랜드는 독립적으로 묶음 처리되므로 사용자는 화면에 보이는 아일랜드가 사용하는 프레임워크 코드만 다운로드합니다.

client:load 지시문은 페이지가 로드될 때 아일랜드를 즉시 하이드레이션합니다. 탐색 메뉴나 검색 입력이 포함된 주요 소개 영역처럼 즉시 표시되고 상호작용해야 하는 아일랜드에 사용합니다. 가장 높은 우선순위를 갖는 하이드레이션 전략입니다.

client:idle 지시문은 핵심 콘텐츠가 로드된 후 브라우저의 주 스레드가 유휴 상태가 될 때까지 기다렸다가 아일랜드를 하이드레이션합니다. 화면 아래쪽에 있는 위젯이나 소셜 공유 막대처럼 즉시 필요하지 않은 보조 상호작용에 적합합니다.

client:visible 지시문은 교차 관찰기를 사용하여 아일랜드가 화면에 들어올 때만 하이드레이션합니다. 댓글 영역이나 관련 상품 캐러셀처럼 페이지 깊숙한 곳에 있어 대부분의 사용자가 도달하지 않을 수 있는 아일랜드에 적합합니다. JavaScript는 필요할 때까지 아예 로드되지 않습니다.

client:only 지시문은 서버 측 렌더링을 완전히 건너뛰고 브라우저에서만 아일랜드를 렌더링합니다. 브라우저 전용 응용 프로그래밍 인터페이스를 사용하거나 처음 연결될 때의 클라이언트 측 상태에 의존하는 구성 요소에 필요합니다. 그 대가로 해당 아일랜드에는 서버에서 렌더링된 HTML이 제공되지 않습니다.

아일랜드 아키텍처는 실제로 상호작용하는 구성 요소에만 JavaScript를 로드하고 실행하여 전체 하이드레이션 문제를 해결합니다. 좋아요 버튼이 있는 블로그 게시물은 좋아요 버튼 아일랜드만 하이드레이션합니다. 1,200단어 분량의 기사 텍스트와 머리글, 바닥글에서는 클라이언트 측 JavaScript 실행이 전혀 발생하지 않습니다.

각 아일랜드에는 자체적으로 격리된 상태가 있습니다. 아일랜드는 서로 별도의 리액트 트리이므로 리액트 상태를 직접 공유할 수 없습니다. 이는 의도된 설계입니다. 두 구성 요소가 상태를 공유해야 한다면 하나의 아일랜드로 합쳐야 합니다. 아일랜드 간 통신에는 웹 주소 매개변수, DOM 이벤트 또는 가벼운 상태 라이브러리를 사용합니다.

리액트 SPA에서 아일랜드 아키텍처로 이전한 사이트들(아스트로 문서 사이트 등)은 큰 개선을 보고했습니다. JavaScript 전송량은 70~90% 감소하고, 모바일에서 TTI는 2~4초 향상되며, 라이트하우스 성능 점수는 60점대에서 90점 이상으로 상승합니다. 이러한 효과는 콘텐츠 중심 페이지에서 가장 두드러집니다.

컴포넌트가 뷰포트에 들어올 때만 하이드레이션하는 Astro 하이드레이션 지시어는 무엇입니까?

아일랜드 아키텍처는 페이지 대부분을 정적 HTML로 유지하고, 격리된 상호작용 컴포넌트만 하이드레이션합니다. Astro는 하이드레이션 지시어를 제공합니다. client:load(즉시), client:idle(유휴 상태가 된 후), client:visible(스크롤되어 보일 때), client:only(클라이언트에서만 렌더링)입니다. 각 아일랜드는 독립적으로 하이드레이션되므로, JavaScript의 양은 페이지 크기가 아니라 상호작용성에 비례합니다.