Hydrating sections or components

Although we have a function that can dynamically include HTML rendered from a template and apply it to a tag present in the document, we cannot decide whether we want to replace or insert HTML, in other words, hydrate or replace the DOM.

Hydration is a technique in web development where client-side JavaScript converts a static HTML web page into a dynamic web page by attaching event handlers to the HTML elements. This allows for a fast First Contentful Paint (FCP) but there is a period of time afterward where the page appears to be fully loaded and interactive. However, it is not until the client-side JavaScript is executed and event handlers have been attached.

To solve this problem, we will start by remembering that the Consumer class is prepared to receive the append instruction:

    def send_html(self, event):
        """Event: Send html to client"""...