6

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

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.

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?

Alexandre Elshobokshy
  • 10,720
  • 6
  • 27
  • 57
vhoyer
  • 764
  • 8
  • 16
  • 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 Jan 23 '19 at 11:10
  • see https://github.com/jagreehal/stencil-ssr-example – pungggi Jun 12 '19 at 23:07

4 Answers4

2

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

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.

  • 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 comments that the renderer inject when rendering stencil components

Outdated comment, before Stencil V1:

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

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.com/ionic-team/stencil/issues/1036

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

Gomah
  • 681
  • 8
  • 9
0

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

vhoyer
  • 764
  • 8
  • 16
0

Indeed, you have a workaround

  1. You must publish you webcomponent 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.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

Cheers

Leonardo G. Leenen
  • 1
  • sorry, but, does this method works with server side rendering? is it delivered to the client in a pre rendered way? – vhoyer Apr 13 '19 at 19:18
0

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.

Gion Rubitschung
  • 741
  • 11
  • 31