如何在使用 Nuxt.js 的项目中使用 stencil.js 进行 SSR（以及 SSR）

Question

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

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

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

我知道stencil.js有那个“prerender”，在我的理解中基本上是 SSR，我想和Nuxt.js SSR 一样使用它。

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

Answer 1

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

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

它能做什么：

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

• 它注入一个插件CSR定义从模板库中的自定义元素，如所描述这里 。

Note️注意：在CSR上进行水化处理时，Vue几乎不会引发错误，这可能是由于渲染模板组件时渲染器注入的注释

---

---

在Stencil V1之前的过时注释：

根据此评论 ，Stencil v1似乎可以解决SSR：

模板一将使用dist-hydrate-script输出目标生成一个节点脚本，该节点脚本可用于对脚本进行水化处理。 然后，可以在许多位置（Angular Universal，Express Middleware，自定义预渲染等）重复使用生成的dist / hydr / index.js脚本。

如果要进行预渲染，则只需将--prerender标志添加到模板构建中，它将为您处理所有这些工作。 我们仍在积极地进行这项工作，并希望尽快将其发货。 谢谢

Github相关问题：

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

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

Answer 2

哦，是的，正如Aldarund所说，您不能，我更好地查看了prerendering页面 ，据说那里的prerender是在构建时发生的，所以这是不可能的：/太糟糕了

Answer 3

确实，您有一种解决方法

1. 您必须以unpkg或任何其他公共（或私有）CDN发布Web组件
2. 在您的nuxt.config.js文件中，在部分脚本中添加脚本。 该脚本必须引用您的公共库（ https://stenciljs.com/docs/javascript ）

有关如何向您的nuxt项目添加外部资源的更多信息，请阅读： https ://nuxtjs.org/faq/->如何使用外部资源

干杯

Answer 4

对于使用 nuxt 3 的人。我找到了一个使用 nuxt 3 ssr 的模板的解决方案。 你可以在这个问题中找到答案。