填入指的是當 HTML 在瀏覽器中呈現時，將 JavaScript 行為加回頁面中經過編譯之 HTML 的程序。
例如，假設您的頁面上有兩個要呈現為主要/明細的元件，當按一下主要元件中的某個項目時需要更新明細元件。此動作完全由在頁面中執行的 JavaScript 處理。若要這麼做，您需要在這兩個元件呈現到頁面後填入它們的 HTML，方法為替主要元件中的元素增加 on click 事件處理程式，替明細元件容器增加監聽器，以便於 on click 事件發生時，根據事件中傳送的有效負載重新呈現。
元件編譯器會在頁面中插入 HTML。您的元件在程式實際執行時若需要執行額外的 JavaScript 來加入像事件處理程式之類的項目，則您可以選擇使用內嵌 JavaScript 或 Hydrate 函數。應選擇哪一個解決方案取決於您的需求。
您可以直接將 <script> 標記插入傳回的已編譯標記中。此命令檔將會在頁面執行時執行。
例如：
<script src="/_sitesclouddelivery/renderer/libs/scs-core/jssor-
slider/js/jssor.slider.min.js" type="text/javascript"></script>
<div id="slider_container_c46b122d-978a-429d-aa25-9b5698428f6f"
style="position: relative; top: 0px; left: 0px; height: 400px; width: 600px;
background-color: rgb(68, 68, 68); visibility: visible;" data-jssor-
slider="1">
. . .
</div>
<script>
(function () {
// get the required options
var options =
{"$FillMode":2,"$AutoPlay":false,"$AutoPlayInterval":3000,"$SlideDuration":50
0,"$ArrowKeyNavigation":true,"$HWA":false,"$BulletNavigatorOptions":{"$Chance
ToShow":1,"$AutoCenter":1,"$SpacingX":5},"$ArrowNavigatorOptions":{"$ChanceTo
Show":1,"$AutoCenter":2,"$Steps":1},"$ThumbnailNavigatorOptions":{"$ChanceToS
how":0,"$DisplayPieces":7,"$SpacingX":8,"$ParkingPosition":240}};
// select the JSSOR value options
options.$BulletNavigatorOptions.$Class = $JssorBulletNavigator$;
options.$ArrowNavigatorOptions.$Class = $JssorArrowNavigator$;
options.$ThumbnailNavigatorOptions.$Class =
$JssorThumbnailNavigator$;
// create the slider
var slider = new $JssorSlider$("slider_container_c46b122d-978a-
429d-aa25-9b5698428f6f", options);
// resize, maintaining aspect ratio
var container = slider.$Elmt.parentElement;
if (container) {
slider.$ScaleWidth(container.getBoundingClientRect().width);
}
})();
</script>
相較於內嵌 JavaScript，您可以改為在 render.js 檔案中包含 hydrate 函數，並請注意傳回編譯的標記時，該元件在程式實際執行時需要填入。此填入可避免重複的 <script> 標記，讓您利用現有的 JavaScript 程式碼來管理事件。
即使已載入 render.js，填入期間也不會呼叫 render() 函數。只會呼叫 hydrate() 函數。
註：
如果編譯的元件沒有說明需要填入，則不會載入元件的render.js 檔案。例如，自訂內容版面配置編譯器將會傳回 - { hydrate: true }。
return Promise.resolve({
content: compiledContent,
hydrate: true // note that we want to hydrate this component using the
render.js hydrate() function. This is required for when the user clicks on
the author
});
此外，必要時自訂編譯器可以新增在程式實際執行時尋找的 hydrate 特性。例如：
Compiler:
// calculate the hydrate data
content.hydrateData = JSON.stringify({
contentId: content.id,
authorName: content.fields['starter-blog-author_name']
});
. . .
Template:
<div class="author-container" data-hydrate="{{hydrateData}}">
最後，如果元件標註需要填入，則會在程式實際執行時載入該元件的 render.js 檔案並呼叫 hydrate() 函數，傳入包含已編譯標記的容器 <div> 中。
例如，render.js - 請參閱 hydrate() 函數：
function selectAuthor(parentObj, contentId, authorName) {
var $parentObj = $(parentObj);
$parentObj.find(".author-name").click($.proxy(function () {
$(".author-name").removeClass('author-selected');
$(event.target).addClass('author-selected');
}, self));
if (window.location.href.indexOf("default=" + contentId) >= 0) {
$(".author-name").each(function () {
if (this.innerText === authorName) {
$(this).addClass('author-selected');
}
});
}
}
. . .
hydrate: function (parentObj) {
var $parentObj = $(parentObj),
hydrateData = $parentObj.find('.author-container').attr('data-
hydrate');
if (hydrateData) {
var data = JSON.parse(hydrateData);
selectAuthor(parentObj, data.contentId, data.authorName);
}
},
render: function (parentObj) {
. . .
try {
// Mustache
template = Mustache.render(templateHtml, content);
if (template) {
$(parentObj).append(template);
}
selectAuthor(parentObj, this.contentItemData.id,
content.fields['starter-blog-author_name']);
} catch (e) {
console.error(e.stack);
}
}