Stencil: SSR: rehydrated component rendered twice

[webpro]

Very interesting project. I'm looking into SSR, but hitting a bug (or incorrect usage from my side).

Stencil version:

@stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request

Current behavior:

After building the project, and running the SSR server (using stencil.ssrMiddleware), the hydration fails, as the component renders itself again next to what was already rendered server-side.

<my-component first="Stencil" last="JSX" ssrv="0" class="hydrated">
  <div ssrc="0.0">
    <p ssrc="0.0"><!--s.0.0-->Hello, my name is Stencil JSX<!--/--></p>
  </div>
  <div>
    <p>Hello, my name is Stencil JSX</p>
  </div>
</my-component>

Expected behavior:

The component is already rendered server-side, so it should be something like this:

<my-component first="Stencil" last="JSX" class="hydrated">
  <div>
    <p>Hello, my name is Stencil JSX</p>
  </div>
</my-component>

Steps to reproduce:

git clone [email protected]:webpro/stencil-ssr-starter.git
npm install
npm run build
npm run ssr
# go to http://localhost:3030

Other information:

I've tried migrating to version 1.0.0-alpha.7 (in the one branch), but then I'm running into the issue that @stencil/core/server depends on ../dist/server, but this dir only has index.mjs. Running with --experimental-modules enabled results in:

> node --experimental-modules server.js

(node:13973) ExperimentalWarning: The ESM module loader is experimental.
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: [...]/stencil-ssr/node_modules/@stencil/core/dist/server/index.mjs

[adamdbradley]

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

[webpro]

Thanks for clarifying this, Adam.

By the way, in the rep(r)o https://github.com/webpro/stencil-ssr-starter, I've just added a component with shadow: true and this renders/works fine as shadow DOM in dev and after build + SSR.

[apiel]

Is there any update concerning SSR? Right now the SSR documentation is very minimalistic and I even wonder how @webpro manage to build his example. Right now when I run the build with --prerender flag, it is hanging for ever :-/

[bekliev]

More examples and page in the docs for SSR would be so useful!

[4aficiona2]

I'm using Stencil One (v 1.1.6) and still notice this behaviour on certain components.
Only some (3 out of 20ish) get rendered twice after the rehydration but I could not yet figure out why nor see a pattern.

Any ideas?

[Gbuomprisco]

Experiencing the same problem when using drag&drop. But using shadow: true works.

[adamdbradley]

This should be fixed in the latest version. If it's still a problem, would you be able to create an issue with a thorough description on how to replicate this? Thanks

[chenyulun]

Here you go @webpro : #2611