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

Double rendering pre-rendered pages #55

Closed
mrbrianevans opened this issue Apr 5, 2021 · 4 comments
Closed

Double rendering pre-rendered pages #55

mrbrianevans opened this issue Apr 5, 2021 · 4 comments

Comments

@mrbrianevans
Copy link
Contributor

Pre-rendered pages render twice if navigated to directly by URL, if the HTML template has been changed (elements added to the body).

This is due to the main div id being app, but preact looks for either the first div, or one with id preact_root. A lot more info about this is available on this issue:

With the default template, there will be no element with id="preact_root". In this case, we essentially make a "guess", and hydrate starting from the first Element in <body>:

<body>
    <div></div>    <!-- ⬅ preact assumes this is your app's rendered HTML -->
    <other-stuff-here>
    <script src="..blah"></script>
</body>

In your case, that first element is definitely not the pre-rendered <App/> component, so we're essentially "guessing wrong".

If you render your app's root JSX element with that id="preact_root" prop, we no longer have to guess which element within <body> was the pre-rendered HTML, since it's explicitly tagged as the root using an attribute:

<body>
    <div>this is not the App component's pre-rendered HTML</div>  <!-- ⬅ won't be touched -->

    <div id="preact_root">  <!-- ⬅ preact-cli will render (hydrate) your app using this element as the root -->
        <h1>hello from App.js</h1>
    </div>

    <script src="..blah"></script>
</body>

Originally posted by @developit in preactjs/preact-cli#1330 (comment)
@ForsakenHarmony
Copy link
Contributor

Is this an issue with this template specifically?
Otherwise, I think the original issue you linked is the correct one and this is a duplicate?

@mrbrianevans
Copy link
Contributor Author

This line in the template:

<div id="app">

should be changed to

<div id="preact_root">

to avoid the double rendering issue described above, for anyone who uses this template and adds anything else to the html body.

Because Preact assumes that the root element has id preact_root, I think it makes sense for the template to match that by default.

@mrbrianevans mrbrianevans mentioned this issue Apr 6, 2021
Merged
@gianpaj
Copy link

gianpaj commented Apr 7, 2021

I added a div on the src/components/app.tsx file and I got the double pre-rendered. This fixes it.

Good catch @mrbrianevans

ForsakenHarmony pushed a commit that referenced this issue Apr 8, 2021
@mrbrianevans
Changed root element ID - #55 (#56)
fcfb5bb 
Changed the id from app to preact_root to fix issue #55
@ForsakenHarmony
Copy link
Contributor

Ok, should be fixed now

daniel-j-h added a commit to daniel-j-h/typescript that referenced this issue Dec 29, 2021
@daniel-j-h
Fixes app -> preact_root id change in style
0d5c7a0 
We have changed from id `app` to id `preact_root` but forgot to change the CSS accordingly.

See
- preactjs-templates#55
- preactjs-templates#56
@daniel-j-h daniel-j-h mentioned this issue Dec 29, 2021
Merged
rschristian pushed a commit that referenced this issue Jul 18, 2022
@mrbrianevans
Changed root element ID - #55 (#56)
aa7dfc4 
Changed the id from app to preact_root to fix issue #55
rschristian pushed a commit that referenced this issue Jul 18, 2022
@daniel-j-h
Fixes app -> preact_root id change in style
101327b 
We have changed from id `app` to id `preact_root` but forgot to change the CSS accordingly.

See
- #55
- #56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gianpaj @ForsakenHarmony @mrbrianevans