[MediaQueryProvider] Fix SSR hydration issues #12824
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
moraleslevi
force-pushed
the
moraleslevi/fix-ssr
branch
3 times, most recently
from
f7ed2f3 to
fdce8e8
Compare
|
I think there is an unrelated issue with Next.js + Node v23.1.0 causing the CI failures (vercel/next.js#47394 (comment)). |
kyledurand
reviewed
Oct 25, 2024
moraleslevi
force-pushed
the
moraleslevi/fix-ssr
branch
from
fdce8e8 to
b9fe9e0
Compare
Merged
moraleslevi
pushed a commit
that referenced
this pull request
Oct 31, 2024
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Patch Changes - [#12824](#12824) [`85c5bb7b4`](85c5bb7) Thanks [@moraleslevi](https://github.com/moraleslevi)! - Fix hydration issues with SSR ## [email protected] ### Minor Changes - [#12662](#12662) [`5bb85b547`](5bb85b5) Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Removes unnecessary new badges from navigation ### Patch Changes - [#12739](#12739) [`af15611a6`](af15611) Thanks [@sarahill](https://github.com/sarahill)! - Updated common action guidelines - [#12806](#12806) [`57e6cbe71`](57e6cbe) Thanks [@IlanaB](https://github.com/IlanaB)! - Fixed a typo in the common actions overview - Updated dependencies \[[`85c5bb7b4`](85c5bb7)]: - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WHY are these changes introduced?
Fixes #11886
Server-side rendering defaults to
isNavigationCollapsedbeingfalse, which causes a React hydration issue when rendered on the client at smaller breakpoints (where the value evaluates astrue).WHAT is this pull request doing?
This modifies the initial render state of
isNavigationCollapsedto match the server-side rendered value (false) and relies on the existinguseEffectto update the value on the client-side after hydration.Before change - React hydration errors at small breakpoints
ssr-before.mp4
After change - No React hydration errors at small breakpoints
ssr-after.mp4
How to 🎩
🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines
🎩 checklist
README.mdwith documentation changes