如何在使用 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 的模板的解決方案。 你可以在這個問題中找到答案。