javascript - 如何在带有Nuxt.js的项目中使用stencil.js进行SSR(也包括SSR)

我想在stencil项目中使用nuxt库。

我能够使它工作，但是当vue组件在服务器端呈现时，我只能使stencil的组件在客户端呈现。

我认为最大的问题是defineCustomElement需要window作为参数。

我知道stencil.js具有“prerender”，这在我的理解中基本上是SSR，我想将其与Nuxt.js SSR一起使用。

所以我的问题是:如何配置nuxt项目以支持stencil.js的服务器端渲染？

最佳答案

更新:我目前正在开发一个Nuxt模块，以与基于stencil.js的库集成。

https://github.com/Gomah/nuxt-stencil

它能做什么:

它使用render:route和generate:page为基于SSR的应用程序(通用或构建时)创建两个钩子(Hook)，它将在将请求发送回浏览器之前呈现模板组件。

如here所述，它为CSR注入(inject)了一个插件，用于定义模板库中的自定义元素。

Note️注意:Vue在CSR上充水时几乎不会出错，这可能是由于渲染模板组件时渲染器注入(inject)了注释



在Stencil V1之前的过时注释:

根据此comment，Stencil v1似乎可以解决SSR:



Github相关问题:

https://github.com/ionic-team/stencil/issues/1036

https://github.com/ionic-team/stencil/issues/1449