4

I want to make SSR in my Angular app by using Angular Universal.

The SSR work but Web-Components made with Stencil are not rendered (does not work when JS is disabled).

LitElement and Vanilla JS web components doesn't work either.

I have found that Stencil have a dist-hydrate-script output that would make it work.

But I haven't found any documentation about it and looking at the source didn't help. (I don't know how to use the hydrateDocument() or renderToString() method).

Thank you =)

Guillaume M
  • 161
  • 6

1 Answers1

1

https://github.com/sajTempler/stencil-ssr/blob/master/example_endpoint/server/index.js#L4

add to your output targets in stencil config

{ type: 'dist-hydrate-script' },

this will create hydrate app which you can use on your server

const { renderToString  } = require('../client/hydrate');

and using express:

app.get('/', async (_req, res) => {

    const { html } = await renderToString("<my-component></my-component>", {
        prettyHtml: true
    })

    res.send(html);
})
sajtempler
  • 11
  • 2