javascript - 如何在带有 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 的应用程序(通用或构建时)创建两个 Hook ，它将渲染模板将请求发送回浏览器之前的组件。

• 它为 CSR 注入(inject)一个插件来定义模板库中的自定义元素，如所述 here .

⚠️ 注意:Vue 在 CSR 上水化时抛出一些错误，这可能是由于渲染器在渲染模板组件时注入(inject)的注释

---

---

Stencil V1 之前的过时评论:

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

Stencil One will use the dist-hydrate-script output target to generate a node script that can be used to hydrate your scripts. Then the generated dist/hydrate/index.js script is something you can reuse in numerous locations (Angular Universal, Express Middleware, custom prerendering, etc).

If you're prerendering, you'll be able to just add the --prerender flag to your stencil build, and it'll handle all of this for you. We're still actively working on this and hope to ship it soon. Thanks

Github 相关问题:

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

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