How To Hydrate A Server-Side Rendered Web Component

Danny Moerkerke
ITNEXT
Published in
12 min readMay 11, 2023

An in-depth guide to lazy loading Web Components

Photo by Linus Mimietz on Unsplash

In part 1 of this series I explain you how to server-side render a Web Component.

Hydration

Declarative Shadow DOM enables us to attach a Shadow root to a Custom Element and fully render it without any JavaScript. This is a huge step for web components since they can now be rendered on the server. But there is a slight problem though.

Our component doesn’t do anything, it’s not interactive.

Even worse, it’s not even a Custom Element!

If you check the server-side rendered components from my previous article in the browser’s dev tools you will notice they all have a Shadow root attached to it. But when you check the CustomElementsRegistry to find the constructor of the element:

const el = await customElements.get('my-element');

console.log(el) // undefined 😱

you will notice that it hasn’t even been registered as a Custom Element.

This is an important fact to realise about Declarative Shadow DOM: it only attaches a Shadow root to an element.

In other words, it only takes care of rendering the HTML of the component and nothing else. The benefit of this approach is that it…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Published in ITNEXT

ITNEXT is a platform for IT developers & software engineers to share knowledge, connect, collaborate, learn and experience next-gen technologies.

Written by Danny Moerkerke

I write about what the modern web is capable of, Web Components and PWA, creator of https://whatpwacando.today

Responses (1)

What are your thoughts?

Thanks ♥