【要約】Chrome 150に追加された宣言的部分更新でJavaScriptを一切書かずにスライドショーアプリを作る [Zenn_Python] | Summary by TechDistill
> Source: Zenn_Python
Execute Primary Source
// Problem
開発者が動的なWebコンテンツを実装する際、従来のページ更新手法は以下の非効率性を抱えていた。
- ・
location.reload()を用いると、画像のみの更新であってもHTML全体を再送する。 - ・
<head>やCSS、ページ全体の構造まで再送するため、通信帯域を無駄に消費する。 - ・クライアント側で更新タイミングを制御するために、JavaScriptの実装が不可欠となる。
- ・ページ全体を再読み込みするため、ユーザー体験における一瞬の白飛びが発生しやすい。
- ・これらは、低帯域な環境やシビアなUXが求められる現場において、大きなペインポイントとなる。
// Approach
筆者はChrome 150の新機能であるDPUを活用し、サーバーからHTML断片をストリーミングする手法を採用した。
- ・
StreamingResponseを使い、HTML接続を維持したまま追加のHTML断片を流し込む。 - ・
<?start name="memory">等の処理命令で、更新対象となるHTMLの範囲を明示する。 - ・
<template for="memory">を用いて、既存の範囲をパッチとして宣言的に差し替える。 - ・サーバー側の
asyncio.sleep(3)により、ブラウザ側のJSなしで更新間隔を制御する。 - ・
X-Accel-Buffering: noを付与し、リバースプロキシによるバッファリングを回避する。
// Result
この実装により、クライアント側にJavaScriptを一切持たせないスライドショーが実現した。
- ・JSによるDOM操作や状態管理を完全に排除し、サーバー主導の更新を実現した。
- ・画像部分のみを差分として送るため、通信量と再描画のコストを削減した。
- ・サーバー側の非同期ジェネレーターにより、ストリームの制御を簡潔に行える。
- ・ブラウザの読み込みインジケーターが完了しない等の特性はあるが、動的なUI構築に成功した。
- ・これにより、HTMLをアプリケーション更新のプロトコルとして直接利用できる可能性を示した。
Senior Engineer Insight
> DPUは通信効率と開発体験を向上させるが、実運用には注意が必要だ。接続維持により、サーバーのリソース消費が増大する可能性がある。また、Nginx等のプロキシでバッファリングを無効化する設定が必須となる。さらに、サーバー停止時の接続終了処理が、従来の方式より複雑になる。インフラ構成を含めた慎重な設計が求められる技術である。