Hidratación del componente

La hidratación hace referencia al proceso por el que se agrega de nuevo el comportamiento JavaScript al HTML compilado en la página cuando este se representa en el explorador.

Por ejemplo, si hay dos componentes en la página que quiere representar como principal/detalle, al hacer clic en un elemento del principal es necesario que actualice el componente de detalle. Todo esto lo gestiona JavaScript, que se ejecuta en la página. Para que esto funcione, hidrate el HTML de los dos componentes representados en la página agregando un manejador de eventos on click a los elementos del componente principal y un listener al contenedor del componente de detalle para volver a representar cuando el evento on click se produzca en función de la carga útil transferida en el evento.

Los compiladores de componentes insertan HTML en la página. Si el componente necesita que se ejecute JavaScript adicional en tiempo de ejecución para agregar elementos como manejadores de eventos, tendrá dos opciones: JavaScript en línea o la función de hidratación. La solución que elija depende de sus necesidades.

JavaScript en línea

Puede insertar una etiqueta <script> directamente en el marcador compilado que se devuelve. El script se ejecutará cuando se ejecute la página.

Por ejemplo:

<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>

Función de hidratación

En lugar de insertar JavaScript, puede incluir una función de hidratación en el archivo render.js e indicar que el componente necesita hidratación en tiempo de ejecución cuando devuelve el marcador compilado. Esta hidratación evita etiquetas <script> repetitivas y le permite mejorar el código JavaScript existente para gestionar eventos.

Aunque el archivo render.js esté cargado, no se llama a la función render() durante la hidratación. Solo se llama a la función hydrate().

Nota:

Si un componente compilado no indica que necesita hidratación, el archivo render.js del componente no se carga.

Por ejemplo, el compilador de diseño de contenido personalizado se devolverá con - { 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
});

Además, si es necesario, el compilador personalizado puede agregar propiedades de hidratación que buscará en tiempo de ejecución. Por ejemplo:

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}}">

Por último, si un componente indica que necesita hidratación, entonces, en tiempo de ejecución, se cargará el archivo render.js y se llamará a la función hydrate(), transfiriendo el contenedor <div> con el marcador compilado.

Por ejemplo, render.js y la función 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);
        }
    }