리액트나 Next.js가 각자 구현해온 아웃오브오더 HTML 스트리밍이 브라우저 표준으로 들어와, 프레임워크 없이도 페이지 일부를 먼저 보여줄 수 있게 됐다. 크롬 150이 선언적 기능을 먼저 실었고 사파리와 파이어폭스도 지지 의사를 밝혔다.
아웃오브오더 HTML 스트리밍은 페이지가 다 로드되기 전에도 사용자가 먼저 보고 상호작용할 수 있게 해주는 패턴이다. 2009년 페이스북 빅파이프가 처음 내놓았고, 이후 리액트의 서스펜스 스트리밍과 Next.js가 각자 다른 방식으로 구현해왔다. 이 패턴이 이제 프레임워크 바깥, 브라우저 자체로 들어온다.
브라우저가 직접 자리를 채운다
새 선언적 표준안에서는 for 속성을 붙인 <template>이 처리 명령과 짝을 이룬다. 개발자는 <?marker name="profile">로 단일 삽입 지점을 선언하거나, <?start name="profile">와 <?end>로 감싸 임시 대체 콘텐츠를 넣는다. 서버가 나중에 짝이 맞는 <template for="profile">을 스트리밍으로 보내면, HTML 파서가 식별자를 맞춰 시작·끝 마커와 그 사이 내용을 지우고 템플릿 내용을 그 자리에 끼워 넣는다. 같은 이름의 템플릿을 여러 번 연달아 보내 리스트를 이어붙이는 것도 된다.
다른 컴포넌트의 마크업을 몰래 바꿔치는 공격을 막으려고, <template for>는 기본적으로 자신의 직계 부모 요소 안에 있는 처리 명령만 고칠 수 있다. 예외는 <body> 바로 아래 놓인 템플릿으로, 이 경우엔 문서 전체 범위를 얻어 <head> 안의 요소까지 갱신할 수 있다.
지금 상태
자바스크립트 쪽에도 짝이 맞춰진다. setHTML, replaceWithHTML, beforeHTML, prependHTML, appendHTML, afterHTML과 각각의 스트리밍 버전(streamHTML, streamAppendHTML 등), 그리고 *Unsafe 변형까지 한 벌로 묶여 있다. streamHTMLUnsafe()는 WritableStream을 반환해 들어오는 조각을 순서대로 HTML 프래그먼트 파서에 흘려보내고, Fetch API의 response.textStream()은 응답 본문 텍스트를 그 스트림에 바로 연결한다.
선언적 마크업 부분은 이미 WHATWG HTML 리빙 스탠다드에 들어갔다. 크롬과 엣지 150이 이 기능을 먼저 지원하고, textStream()은 151에서 따라붙는다. 자바스크립트 쪽 DOM 스트리밍 메서드는 별도 표준화 트랙을 밟는 중이다. 웹킷은 포지티브 스탠다드 포지션을 냈고, 모질라도 관심이 있다는 뜻을 밝혔다.