‏Declarative Partial Updates: به‌روزرسانی بخشی از صفحه بدون فریم‌ورک

وب مدت‌هاست که از اون مدل سند‌محور ساده فاصله گرفته، اما HTML هنوز داده‌ها رو از بالا به پایین و به ترتیب تحویل می‌ده. این محدودیت باعث شده توسعه‌دهنده‌ها یا صبر کنن تا کل صفحه آماده بشه یا از فریم‌ورک‌های جاوااسکریپت سنگین استفاده کنن. تیم کروم با پروژه‌ای به اسم Declarative Partial Updates داره این مشکل رو از ریشه حل می‌کنه.

API اول: استریم خارج از ترتیب (Out-of-Order Streaming) این بخش از عنصر و یک مفهوم جدید به اسم processing instruction استفاده می‌کنه. به زبان ساده، شما یه جای‌نگه‌دار (placeholder) توی HTML می‌ذارید و بعداً محتوا رو از هر جایی از داکیومنت داخلش می‌ریزید — حتی بعد از اینکه صفحه شروع به بارگذاری کرده:

<div>
  <?start name="another-placeholder">
  Loading…
  <?end>
</div>

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

با این روش مثلاً می‌شه ابتدا چیدمان اصلی صفحه رو نمایش داد، بعد وقتی نتیجه یه کوئری پایگاه داده آماده شد، اون رو دقیقاً توی جای درستش قرار داد — بدون هیچ دستکاری جاوااسکریپت.

این API برای island architecture (معماری جزیره‌ای) هم عالیه؛ یعنی همون الگویی که فریم‌ورک‌هایی مثل Astro محبوبش کردن. حالا می‌شه همین کار رو مستقیم توی HTML انجام داد. پولیفیل این ویژگی روی npm با نام template-for-polyfill موجوده.

API دوم: متدهای جدید درج و استریم HTML مشکل دیگه اینه که متدهای فعلی جاوااسکریپت برای درج HTML — مثل innerHTML، insertAdjacentHTML، setHTML — هر کدوم رفتار متفاوتی دارن و هیچ‌کدوم از استریم پشتیبانی نمی‌کنن. کروم یه مجموعه API منسجم و هم‌نام پیشنهاد داده که هم نسخه‌های ایستا و هم نسخه‌های استریمی داره. نسخه استریمی با Streams API کار می‌کنه:

const contentElement = document.querySelector('#content-to-update');
const response = await fetch('/api/content.html');

response.body
  .pipeThrough(new TextDecoderStream())
  .pipeTo(contentElement.streamHTMLUnsafe());

با این روش دیگه لازم نیست کل محتوا دانلود بشه تا نمایش داده بشه — می‌شه همزمان با دریافت، توی صفحه نمایش داد.

متدهای با پسوند Unsafe sanitizer رو به صورت پیش‌فرض خاموش می‌کنن و اجرای اسکریپت رو هم (با گزینه runScripts: true) مجاز می‌دونن. پولیفیل این بخش هم با نام html-setters-polyfill روی npm در دسترسه.

هر دوی این APIها از Chrome 148 با فعال کردن فلگ chrome://flags/#enable-experimental-web-platform-features قابل آزمایشن و در حال استانداردسازی با بازخورد مثبت از سایر سازندگان مرورگرن.

نکات کلیدی:

• امکان جای‌گذاری محتوا از هر جای داکیومنت رو می‌ده بدون وابستگی به ترتیب HTML