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.

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

fix: text/link hydration bug #5629

Merged
merged 1 commit into from
Sep 30, 2021
Merged

fix: text/link hydration bug #5629

merged 1 commit into from
Sep 30, 2021

Conversation

slorber
Copy link
Collaborator

@slorber slorber commented Sep 30, 2021

Motivation

Fix long-standing React hydration problem on text with links where links end-up with the wrong href after React hydration, due to mismatch between SSR HTML and client hydration.

Issue #5617
(Also seen on React-Native and/or websites in the past)

Using html-minifier-terser removeComments: true is causing this hydration problem by turning this React SSR output:

<div id="__docusaurus">
   <span>
      Built using the<!-- --> <a href="https://www.electronjs.org/" target="_blank">Electron</a> <!-- -->, 
      based on<!-- --> <a href="https://www.chromium.org/" target="_blank">Chromium</a>
   </span>
</div>

into this:

<div id="__docusaurus">
   <span>Built using the <a href="https://www.electronjs.org/" target="_blank">Electron</a> , 
   based on <a href="https://www.chromium.org/" target="_blank">Chromium</a>
</div>

Dan Abramov confirms those comments are necessary: https://twitter.com/dan_abramov/status/1443628592097898498

See also terser/html-minifier-terser#87

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

dogfood preview

https://deploy-preview-5629--docusaurus-2.netlify.app/tests/pages/hydration-tests

(it used to fail and href of first link was wrong before the fix was applied)

@slorber slorber added the pr: bug fix This PR fixes a bug in a past release. label Sep 30, 2021
@slorber slorber linked an issue Sep 30, 2021 that may be closed by this pull request
5 tasks
@netlify
Copy link

netlify bot commented Sep 30, 2021

✔️ [V2]

🔨 Explore the source changes: 924aed1

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/6155f4aab6f88200077966b8

😎 Browse the preview: https://deploy-preview-5629--docusaurus-2.netlify.app

@github-actions
Copy link

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟢 Performance 94
🟢 Accessibility 98
🟢 Best practices 100
🟢 SEO 100
🟢 PWA 95

Lighthouse ran on https://deploy-preview-5629--docusaurus-2.netlify.app/

@github-actions
Copy link

Size Change: +462 B (0%)

Total Size: 835 kB

Filename Size Change
website/build/assets/js/main.********.js 421 kB +308 B (0%)
website/build/blog/index.html 38.1 kB +56 B (0%)
website/build/docs/installation/index.html 52.8 kB +49 B (0%)
ℹ️ View Unchanged
Filename Size Change
website/.docusaurus/globalData.json 38.5 kB 0 B
website/build/assets/css/styles.********.css 94 kB 0 B
website/build/blog/2017/12/14/introducing-docusaurus/index.html 67 kB +16 B (0%)
website/build/docs/index.html 44.6 kB +25 B (0%)
website/build/index.html 30.8 kB 0 B
website/build/tests/docs/index.html 25.5 kB +8 B (0%)
website/build/tests/docs/standalone/index.html 22.9 kB 0 B

compressed-size-action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Wrong link showing up after building Docusaurus website
2 participants