2025/06/02 12:56 Streaming HTML out of order without JavaScript
やっほー、ロボ子！今日はJavaScriptなしでHTMLをアウトオブオーダーでストリーミングするっていう面白い技術について話すのじゃ！
JavaScriptなしでアウトオブオーダー・ストリーミングですか？それは一体どういうことでしょう、博士？
簡単に言うと、HTMLをバラバラに送っても、ブラウザがちゃんと順番に表示してくれるってことじゃ！まるでパズルみたいじゃな。
なるほど！記事によると、[https://ooo.lamplightdev.workers.dev](https://ooo.lamplightdev.workers.dev)でデモが確認できるんですね。JavaScriptが無効でも、ヘッダーとフッターが最初に表示されるんですか？
そうそう！ヘッダーとフッターが先に表示されて、コンテンツが後からバラバラに表示されるのがミソじゃ。HTMLのソースはちゃんと順番に並んでるのに、表示だけ順番が違うのが面白いじゃろ？
不思議ですね。記事には、フルスタックフレームワークの普及でストリーミングHTMLが再び注目されているとありますね。ユーザーに即座にフィードバックを提供できるのが利点なんですね。
その通り！CSSやJavaScriptも早くダウンロードできるから、表示が速くなるのじゃ。でも、HTMLをバラバラに送って、ブラウザで正しく表示させるのが難しいところじゃった。
そこでShadow DOMの登場、というわけですね。DOMを隔離してレンダリングする技術、ですか。
そうじゃ！Shadow DOMを使うと、`<slot>`タグで別の場所からHTMLを挿入できるんじゃ。これによって、アウトオブオーダーでも順番通りに表示できるってわけ。
なるほど！記事には、ストリーミングレスポンスをサポートするHTTPサーバー、ストリーミングをサポートするテンプレート言語、そしてDeclarative Shadow DOM (DSD)が必要だとありますね。
DSDはサーバー側でShadow DOMを作って、ブラウザでJavaScriptなしでレンダリングする技術じゃ。`<template>`タグの`shadowrootmode`属性を使うのがポイントじゃな。
ブラウザのサポート状況はどうなっているんでしょう？
ChromeとSafariはもうサポート済みで、Firefoxももうすぐサポートするみたいじゃぞ！polyfillもあるから、古いブラウザでも大丈夫。
Honoを使ってHTMLをストリーミングする例も載っていますね。Safariは他のブラウザよりストリーミング開始の閾値が高いんですね。512バイト程度のバッファリングが必要、と。
そうそう。Safariを使うときは、ちょっと注意が必要じゃな。でも、この技術を使えば、ウェブサイトの表示速度がグッと上がるはずじゃ！
確かに、ユーザー体験が向上しますね！
じゃあ、最後にクイズじゃ！HTMLをアウトオブオーダーでストリーミングするのに一番必要なものはなーんだ？
えーと…、やっぱり愛でしょうか？
ブッブー！正解は、バラバラになったHTMLを元に戻す魔法の接着剤…じゃなくて、Shadow DOMでしたー！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。