Out-of-Order Streaming

들어가며

기존 HTML은 요소를 렌더할 때 위에서부터 아래로 받아와 순서상 뒤에 있는 요소 아무리 중요하더라도 나중에 렌더되게 된다. 앞선 요소를 JavaScript로 나중에 삽입하는 방법도 있지만, 이제^[각주:1]는 JavaScript 없이도 선언적으로 위쪽에 있는 요소를 나중에 끼워넣을 수 있게 되었다.

<template for>와 선언적 일부 업데이트

로딩 인터페이스가 필요하지 않은 경우 <?marker name>과 <template for>를 이용하면 되고,

<?marker name="my-placeholder">

...

<template for="my-placeholder">
  Here is some <em>HTML content</em>!
</template>

로딩 인터페이스가 필요한 경우 <?marker name> 대신 <?start name>과 <?end>로 감싸면 된다.^[각주:2]

<?start name="my-placeholder">
Loading…
<?end>

<title> 교체

이를 이용하면 <head> 안에 있는 문서 제목도 변경할 수 있다.

<title>
  <?start name="title">
  불러오는 중...
</title>

<main>
  <?start name="heading">
  <div>불러오는 중...</div>
  <?end>

  <section aria-label="상품 이미지">
    <?start name="image">
    <div>불러오는 중...</div>
  </section>

  <section aria-label="상품 정보">
    <?start name="details">
    <div>불러오는 중...</div>
  </section>
</main>

<template for="title">
  큐두부
</template>

<template for="heading">
  <h1>큐두부</h1>
</template>

<template for="image">
  <picture>
    <source srcset="lowres.avif" type="image/avif">
    <source srcset="lowres.webp" type="image/webp">
    <img src="lowres.jpg" alt="큐두부의 외관. 콩깍지 모양의 틈 사이로 대두가 보인다. 위쪽에는 초록색 배경에 흰색 글씨로 FROZEN Q TOFU라고 쓰여 있다.">
    <script src="update-lowres-to-hires.mjs"></script>
  </picture>
</template>

<template for="details">
  <table>
    <tbody>
      <tr>
        <th scope="row">중량</th>
        <td>500 g</td>
      </tf>
      <tr>
        <th scope="row">가격</th>
        <td>5,000 원</td>
      </tr>
    </tbody>
  </table>
</template>

• 왜 스켈레톤에 aria-busy를 사용하지 않았는지는 Gerard Cohen의 이 글에 쓰여 있다.

1. Chrome 150+, 2026년 6월 30일 [본문으로]
2. <?end> 표지는 없어도 무방하며, 없는 경우 <?start name>부터 태그가 닫힐 때까지가 로딩 인터페이스에 해당한다. [본문으로]