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.
Смотрите видео Stencil Web Components SSR онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь A shot of code 05 Декабрь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 3,224 раз и оно понравилось 56 людям.