javascript - How to do SSR with stencil.js in a project with Nuxt.js (SSR as well) - Stack Overflow

I want to use a stencil library in my nuxt project.

I was able to get it working, but while the vue ponents are being rendered in the server side, I only could make the stencil's ponent to render in the client side.

I think the biggest problem is that the defineCustomElement needs the window as a parameter.

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.

So my question is : how to configure a nuxt project to support server side rendering for stencil.js?

I want to use a stencil library in my nuxt project.

I was able to get it working, but while the vue ponents are being rendered in the server side, I only could make the stencil's ponent to render in the client side.

I think the biggest problem is that the defineCustomElement needs the window as a parameter.

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.

So my question is : how to configure a nuxt project to support server side rendering for stencil.js?

• javascript
• nuxt.js
• server-side-rendering
• stenciljs

Share Improve this question Follow edited Jan 23, 2019 at 10:53 Alexandre Elshobokshy 10.9k66 gold badges3434 silver badges6060 bronze badges asked Jan 23, 2019 at 10:15 vhoyervhoyer 78488 silver badges1616 bronze badges 2

• 1 you cant. Support of SSR is something that should be done at library level. So stencil.js either support ssr or dont support. If it relies on window - it dont support ssr. – Aldarund Commented Jan 23, 2019 at 11:10
• see github./jagreehal/stencil-ssr-example – pungggi Commented Jun 12, 2019 at 23:07

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Update: I'm currently developing a Nuxt module to integrate with stencil.js based libraries.

https://github./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 ponents before sending back the request to the browser.

• It injects a plugin for CSR to define the custom elements from your stencil library, as described here.

⚠️ Note: Vue’s throwing few errors when hydrating on CSR, it's probably due to the ments that the renderer inject when rendering stencil ponents

---

---

Outdated ment, before Stencil V1:

It looks like Stencil v1 might resolve SSR, according to this ment:

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 related issues:

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

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

oh yeah, as Aldarund, said, you can't, I took a better look at the prerendering page and it's said there that the prerender happens on build time, so this will not be possible :/ too bad

Indeed, you have a workaround

1. You must publish you webponent in unpkg or any other public (or private) CDN
2. In your nuxt.config.js file, add script in your section script. This script must be ref to your public lib (https://stenciljs./docs/javascript)

For further information about how to add an external resource to your nuxt project, please read: https://nuxtjs/faq/ -> How to use external resources

Cheers

For the people using nuxt 3. I have found a solution to use stencil with nuxt 3 ssr. You can find the answer here in this question.