fix: first render consistency of useBreakpointValue in SSR+CSR envs

[TimKolberger]

Closes #5506
Based on PR #5638 💖 thanks to @ishowta

📝 Description

Ensure first render consistency in SSR+CSR environments.

⛳️ Current behavior (updates)

The PR #5234 introduced the side effect of mismatching SSR+CSR renders.
This was not fixed by my previous PR #5576.

🚀 New behavior

To ensure the render consistency on the server and client I reordered the priority of the parameter defaultBreakpoint for useBreakpoint.
If a defaultValue is set, it has priority over window.matchMedia.

The hook useBreakpointValue uses now a default value for defaultBreakpoint (base) to make use of this priority change.

💣 Is this a breaking change (Yes/No):

No

[changeset-bot]

🦋 Changeset detected

Latest commit: 7200e52

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@chakra-ui/media-query	Patch
@chakra-ui/react	Patch
@chakra-ui/skeleton	Patch
@chakra-ui/props-docs	Patch
@chakra-ui/test-utils	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-storybook/GmkXx6Vj4jdNZe1MWu7LPPLbxhgn
✅ Preview: https://chakra-ui-storybook-git-fix-use-breakpoints-value-ssr-chakra-ui.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 23c8246:

Sandbox	Source
create-react-app-ts	Configuration
jolly-jepsen-0weleu	Issue #5506
competent-driscoll-mhot73	Issue #5506

[ishowta]

If defaultBreakpoint is set by default, layout flashing will probably occur even in a Vanilla environment.

Although rendering mismatch may be more serious than layout flashing...

[ishowta]

I think it would be better to have a global defaultBreakPoint setting for users who use SSR.

[TimKolberger]

Exactly! We need to support SSR. And this is by my knowledge only possible with a rerender on the client.

It's a great idea to configure this via the theme. I think it's best to do this iterative.

1. fix the bug
2. add the theme config in another PR

[cschroeter]

LGTM.

Fixes issues with Next.js