简体繁体 English

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

[英]How to do SSR with stencil.js in a project with Nuxt.js (SSR as well)

原文 2019-01-23 10:15:10 9 4 javascript/ nuxt.js/ server-side-rendering/ stenciljs

I want to use a stencil library in my nuxt project.我想在我的nuxt项目中使用stencil库。

I was able to get it working, but while the vue components are being rendered in the server side, I only could make the stencil 's component to render in the client side.我能够让它工作，但是当vue组件在服务器端呈现时，我只能使stencil的组件在客户端呈现。

I think the biggest problem is that the defineCustomElement needs the window as a parameter.我认为最大的问题是defineCustomElement需要window作为参数。

I know that stencil.js has that "prerender" which is basically SSR in my understanding, I wanted to use it as well as Nuxt.js SSR.我知道stencil.js有那个“prerender”，在我的理解中基本上是 SSR，我想和Nuxt.js SSR 一样使用它。

So my question is : how to configure a nuxt project to support server side rendering for stencil.js ?所以我的问题是：如何配置nuxt项目以支持stencil.js的服务器端渲染？

4 个解决方案

Update: I'm currently developing a Nuxt module to integrate with stencil.js based libraries. 更新：我目前正在开发一个Nuxt模块，以与基于stencil.js的库集成。

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

What it does: 它能做什么：

It creates two hooks for SSR based applications (universal or build-time) using the render:route & generate:page , it will render the stencil components before sending back the request to the browser. 它使用render:route ＆ generate:page为基于SSR的应用程序（通用或构建时）创建两个钩子，它将在将请求发送回浏览器之前呈现模具组件。
It injects a plugin for CSR to define the custom elements from your stencil library, as described here . 它注入一个插件CSR定义从模板库中的自定义元素，如所描述这里。

⚠️ Note: Vue's throwing few errors when hydrating on CSR, it's probably due to the comments that the renderer inject when rendering stencil components Note️注意：在CSR上进行水化处理时，Vue几乎不会引发错误，这可能是由于渲染模板组件时渲染器注入的注释

Outdated comment, before Stencil V1: 在Stencil V1之前的过时注释：

It looks like Stencil v1 might resolve SSR, according to this 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. 模板一将使用dist-hydrate-script输出目标生成一个节点脚本，该节点脚本可用于对脚本进行水化处理。 Then the generated dist/hydrate/index.js script is something you can reuse in numerous locations (Angular Universal, Express Middleware, custom prerendering, etc). 然后，可以在许多位置（Angular Universal，Express Middleware，自定义预渲染等）重复使用生成的dist / hydr / index.js脚本。

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. 如果要进行预渲染，则只需将--prerender标志添加到模板构建中，它将为您处理所有这些工作。 We're still actively working on this and hope to ship it soon. 我们仍在积极地进行这项工作，并希望尽快将其发货。 Thanks 谢谢

Github related issues: Github相关问题：

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

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

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

Indeed, you have a workaround 确实，您有一种解决方法

You must publish you webcomponent in unpkg or any other public (or private) CDN 您必须以unpkg或任何其他公共（或私有）CDN发布Web组件
In your nuxt.config.js file, add script in your section script. 在您的nuxt.config.js文件中，在部分脚本中添加脚本。 This script must be ref to your public lib ( https://stenciljs.com/docs/javascript ) 该脚本必须引用您的公共库（ https://stenciljs.com/docs/javascript ）

For further information about how to add an external resource to your nuxt project, please read: https://nuxtjs.org/faq/ -> How to use external resources 有关如何向您的nuxt项目添加外部资源的更多信息，请阅读： https ://nuxtjs.org/faq/->如何使用外部资源

Cheers 干杯

For the people using nuxt 3. I have found a solution to use stencil with nuxt 3 ssr.对于使用 nuxt 3 的人。我找到了一个使用 nuxt 3 ssr 的模板的解决方案。 You can find the answer here in this question .你可以在这个问题中找到答案。