Provide a better example for `useMediaQuery` for SSR usage.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The documentation should give a better example on how to implement useMediaQuery with SSR.

Current Behavior 😯

Right now, it only says this and a vage example

An implementation of matchMedia is required on the server, we recommend using css-mediaquery. We also encourage the usage of the unstable_useMediaQueryTheme version of the hook that fetches properties from the theme. This way, you can provide a ssrMatchMedia option once for all your React tree.

I think it should give an example on how to use ssrMatchMedia, and specially, how to set the initial width (given in the example) with common SSR tools, such as NextJS, Razzle or Gatsby.

Right now, I wasn’t able to make this example work, but if I can, I’ll gladly create a PR to complete this documentation page.

[oliviertassinari]

@charlie632 You are right, the documentation for it is minimal. I was lazy when writing this piece of documentation. I wanted to highlight the fact that it’s technically possible. The tests of the component can help. They show how you can use it on the server once you know the client width. To get the client width, you can use a user agent conversion library or HTTP client hints.

It’s not a simple problem. If you can avoid it, its even better.

[oliviertassinari]

@rviderman Do you try using CSS media queries? https://next.material-ui.com/layout/breakpoints/#css-media-queries