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(gatsby): fix hydration flicker on initial render of ssr page #33134

Merged
merged 2 commits into from
Sep 13, 2021

Conversation

pieh
Copy link
Contributor

@pieh pieh commented Sep 10, 2021

Description

This fixes essentially running getServerData twice for same page (once for html and once for page-data) by inlining page-data in html response and hydrating pageData cache so that we never even need page-data request

Note

This will require also Link headers to be not be there for page-data file when getServerData is used

@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Sep 10, 2021
@pieh pieh added topic: render-mode Related to Gatsby's different rendering modes and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Sep 13, 2021
@pieh pieh marked this pull request as ready for review September 13, 2021 11:09
Copy link
Contributor

@sidharthachatterjee sidharthachatterjee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I was about to push a fix for this. Thank you for doing this!

Comment on lines -103 to -111
let hasPageData = false
if (pages.size) {
// test if 1 page-data file exists, if it does we know we're on a gatsby version that supports page-data
const pageDataPath = publicFolder(
getPageDataPath(pages.get(pages.keys().next().value).path)
)
hasPageData = existsSync(pageDataPath)
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This heuristic is no longer working as intended with non-ssg pages and it was there to support really old gatsby version (early v2?)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed

Copy link
Contributor

@sidharthachatterjee sidharthachatterjee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@pieh pieh merged commit 44afaf5 into master Sep 13, 2021
@pieh pieh deleted the fix/ssr/flicker branch September 13, 2021 14:12
pragmaticpat pushed a commit to pragmaticpat/gatsby that referenced this pull request Apr 28, 2022
…sbyjs#33134)

* inline page-data object in html when it contains serverData

* skip settting page-data preload link header for ssr pages
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic: render-mode Related to Gatsby's different rendering modes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants