HTML 스트리밍 API, 웹 페이지 렌더링 성능을 혁신하다!

새로운 HTML 스트리밍 API는 setHTMLUnsafe 및 streamHTMLUnsafe 메서드를 통해 기존 HTML에 동적으로 콘텐츠를 추가하는 기능을 제공한다. 특히, 스트리밍 API(Streaming API)는 모든 콘텐츠가 준비될 때까지 기다릴 필요 없이 페이지 렌더링을 시작하여 성능을 향상시킨다. 아일랜드 아키텍처(Island Architecture)와 같은 패턴을 지원하여, 초기 페이지 로드 속도를 개선하고 사용자 경험을 향상시키는 데 기여한다.

제안된 API는 HTML 내에서 처리 지시자(Processing Instructions)를 사용하여 특정 부분을 업데이트하는 기능을 제공한다. 처리 지시자(Processing Instructions)는 `<pi name="..."` 형태로, 해당 이름을 가진 지시자를 찾아 콘텐츠를 대체한다. 이를 통해, 서버에서 데이터를 받아오는 동안 로딩 상태(Loading State)를 표시하고, 데이터가 준비되면 해당 부분을 새로운 콘텐츠로 대체하는 방식으로 동적인 업데이트를 구현할 수 있다. HTML 파싱(HTML Parsing) 과정에서 발생하는 문제에 대한 고려도 필요하다.

논의에서는 제안된 API가 HTMX 및 Triptych Project와 유사한 기능을 제공하지만, 목적과 사용 사례가 다르다고 언급한다. HTMX는 사용자 상호 작용에 기반한 동적 업데이트를, Triptych Project는 사용자 인터랙션 기본 기능을 확장하는 데 초점을 맞춘다. 반면, 이 API는 서버 주도적인 업데이트, 특히 스트리밍 HTML(Streaming HTML)을 통해 페이지 렌더링 성능을 개선하는 데 중점을 둔다. Triptych Project의 세 번째 제안도 곧 공개될 예정이다.

API 사용 시 몇 가지 주의사항이 존재한다. 보안상의 이유(Security Reasons)로 인해, 처리 지시자는 동일한 부모 요소 내에서만 업데이트할 수 있다. 또한, setHTML과 같은 메서드를 사용할 때, 삽입된 HTML이 기존 DOM을 수정할 수 없다는 점을 유의해야 한다. 향후에는 클라이언트 측 포함(Client-Side Includes), 배칭(Batching), 그리고 변경되지 않는 콘텐츠를 보호하는 기능과 같은 추가 기능이 고려될 수 있다.