search

single-spa / single-spa-layout

Layout engine for single-spa applications
MIT License
78 stars 31 forks source link

layout engine render pure html twice with SSR #148

Open timoyan opened 3 years ago

timoyan commented 3 years ago

Describe the bug or question

When I put pure html in <single-spa-router></single-spa-router>, it will be rendered twice.

Screen Shot 2021-09-10 at 1 26 42 AM

Screen Shot 2021-09-10 at 1 27 20 AM

When i put pure html in <body></body>, it is only rendered one time.

Screen Shot 2021-09-10 at 1 32 44 AM

Screen Shot 2021-09-10 at 1 27 04 AM

Expected behavior It should be render one time.

joeldenning commented 3 years ago

I confirmed that this is a bug. It looks like the server rendered content is correct, but that the hydration on the client side is causing the creation of the duplicate dom element. It's likely because the root element for single-spa-layout is the <body> element by default, and the body element is complicated because single-spa-layout isn't the only thing that adds dom elements to <body>. I'll look into a fix.

joeldenning commented 3 years ago

Looked into the code for this and it's because route.connectedNode is not being set in the browser since the dom nodes were created server side, so the layout engine thinks it has to create a dom node again. The solution is to set that connected node somehow during initial page load or the first recurseRoutes call. I'll try to put together a fix sometime this week.

joeldenning commented 3 years ago

I've created #150 which fixes this. It's a pretty big change so I need to do further testing before publishing as latest. I've published it as single-spa-layout@2.0.0-beta.1, under the beta npm dist-tag. You can use it with npm install --save single-spa-layout@beta.

If you have a chance to try it out, let me know. I will also be planning on testing things further myself - so far I've just tested it with unit tests but need to try it in a real browser, too.

FelixGraf commented 2 years ago

Hi @joeldenning, thanks for implementing the fix for this issue. I saw that the fix should also be included in version 1.7.0-beta.0, but when installing this version, there are no files (except LICENSE, README, and package.json) downloaded from npm.

Bildschirmfoto 2022-04-08 um 09 39 59

I also saw the build step in the GH actions failed for the tag v1.7.0-beta.0 - can this be the problem?

Would it be possible to re-release the version (or a new patch version) that contains the fix? We're not really able yet to upgrade to single-spa-layout@2.x because of https://github.com/single-spa/single-spa-layout/issues/158.#

If there is anything I could do to bring the fix live in single-spa-layout@1.x, I would be happy to help.

pavelozavr commented 5 months ago

Hi, any workaround here? I am using the 2.2.0 version of layout package, the bug still reproduces, plain html is rendered twice