Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

layout engine render pure html twice with SSR #148

Open
timoyan opened this issue Sep 9, 2021 · 5 comments
Open

layout engine render pure html twice with SSR #148

timoyan opened this issue Sep 9, 2021 · 5 comments
Labels
bug Something isn't working

Comments

@timoyan
Copy link

timoyan commented Sep 9, 2021

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.
@filoxo filoxo transferred this issue from single-spa/single-spa Sep 13, 2021
@joeldenning
Copy link
Member

joeldenning commented Sep 20, 2021 •
edited
Loading

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
Copy link
Member

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 joeldenning mentioned this issue Sep 28, 2021
Merged
@joeldenning
Copy link
Member

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 [email protected], 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.

joeldenning added a commit that referenced this issue Oct 4, 2021
@joeldenning
Implement hydration. Resolves #148 (#150)
8692816 
* One approach for hydration

* With console logs

* Things

* Formatting

* Fixes

* 1.7.0-beta.0

* 2.0.0-beta.1

* Fix tests

* Fix tests

* Skip unnecessary builds
@FelixGraf
Copy link

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 [email protected] because of #158

If there is anything I could do to bring the fix live in [email protected], I would be happy to help.

ICodeMyOwnLife added a commit to code-cb/single-spa-layout that referenced this issue Jun 26, 2022
@ICodeMyOwnLife
Wait for error parcels to unmount before navigating away. Resolves si…
cbe5d73 
…ngle-spa#137. (single-spa#138)

1.6.0

Upgrade dependencies (single-spa#143)

* Upgrade dependencies

* Fix single-spa dependency

* Fixes

* Fix

* Fix tests

* Upgrade single-spa

2.0.0-beta.0

Implement hydration. Resolves single-spa#148 (single-spa#150)

* One approach for hydration

* With console logs

* Things

* Formatting

* Fixes

* 1.7.0-beta.0

* 2.0.0-beta.1

* Fix tests

* Fix tests

* Skip unnecessary builds

2.0.0

Fix empty content string bug (single-spa#153)

Co-authored-by: Marcus Resell <[email protected]>

2.0.1

Resolve

Resolve

Resolve

Resolve type issues

Update build config

Update

Create MergeStream

Update

Update

Update

Reimplement flows

Bump to 0.0.3

Update

Add support for PipeableStream

Update

Update
@MilanKovacic MilanKovacic added the bug Something isn't working label Sep 29, 2023
@pavelozavr
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@pavelozavr @joeldenning @timoyan @FelixGraf @MilanKovacic