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