Stencil Web Components SSR
Using web components in an SSR or statically generated environment such as with Gatsby, Next, Nuxt, Astro, Eleventy etc can be a challenge. This is becase the SSR process will use Node JS to generate the HTML and there is not way for this to handle the ShadowRoot generation that web components utilise. Currently this is an imperative process that will create DOM nodes in the browser so not somehting that NodeJS knows anything about. One way around this is to use an actual browser when performing SSR such as pupetteer, but his has its own problems and limitations. Stencil have implemented their own bespoke solution to this by providing a mechanisim to output plain HTML during the SSR process and then 'hydrate' the HTML once once in the browser to enable the full functionality of the web component.
In this tutorial we look at how to configure this with Gatsby which provides a plugin to help us 'gatsby-plugin-stencil'. By using this plugin and configuring the Stencil component to generate the Hydrate script we can get this working in a statically generated website.
Watch video Stencil Web Components SSR online without registration, duration hours minute second in high quality. This video was added by user A shot of code 05 December 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,224 once and liked it 56 people.