@composi/core:

• Install
• Render
• Props
• Events
• Lifecycle
• Hydration
• State
• Fragment
• CDN

Hydration

Reusing Server-Side Content

You'll often want server-rendered content for faster page loads and SEO. Hydration allows you to use server-rendered content and add dynamic behavior by converting it into a component after page load. Composi supports hydration through its render function. Be aware that if you are going to hydrate content in the document, it should be static HTML rendered on the server. Do not try to hydrate a component.

Hydrating Content

To hydrate content, pass render a third argument for the element in the DOM you want to hydrate. This can be a reference to the element, or a valid string selector. Be aware that a generic selector will capture the first occurrence in the DOM, which might not be what you were expecting. Be as specific as possible when using selectors. When you pass a third argument to render, it takes that element and creates a virtual node from it. Then it uses that to diff and patch the DOM for hydration.

See the Pen @composi/core - Hydration by Robert Biggs (@rbiggs) on CodePen.