How to implement Material UI's `useMediaQuery` in NextJs(13.4) `/app` route to avoid flash?

I'm currently working on a Next.js project and utilizing the 'app' router to set up a common layout across all pages. To handle responsive design, I'm using Material-UI (MUI) and its useMediaQuery hook. However, I'm encountering an issue where there's a brief flash screen of the mobile version on the desktop device during the initial second of the render when load a page.

Here's an overview of my setup:

1. MUI with NextJS 13.4.4 /app route.
2. Using Client Component By "use client"; directives of NextJS.

Here is the Code:

 "use client";
import { useState } from "react";
import { NextLinkComposed } from "../Link";
import { useTheme } from "@mui/material/styles";
import { drawerWidth } from "@/utils/constraints";
import {
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
Drawer,
Box,
useMediaQuery,
InputAdornment,
OutlinedInput,
} from "@mui/material";
import {
GroupsOutlined as GroupsIcon,
DashboardOutlined as DashboardIcon,
Search as SearchIcon,
} from "@mui/icons-material";
export default function SideBar({
handleDrawerToggle,
drawerOpen,
}: {
handleDrawerToggle: () => void;
drawerOpen: boolean;
}) {
const theme = useTheme();
const matchUpMd = useMediaQuery(theme.breakpoints.up("md"));
const container =
typeof window !== undefined ? () => window.document.body : undefined;
const [searchValue, setSearchValue] = useState("");
const filteredItems = SideBarItems.filter((item) =>
item.name.toLowerCase().includes(searchValue.toLowerCase())
);
const drawer = (
<Box
component="div"
sx={{
marginTop: { md: "66px", xs: "12px" },
paddingLeft: "16px",
paddingRight: "16px",
}}
>
<Box>
<OutlinedInput
size="small"
id="input-search-header"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
sx={{
borderRadius: 3,
}}
placeholder="Search"
startAdornment={
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
}
aria-describedby="search-helper-text"
inputProps={{ "aria-label": "weight" }}
/>
</Box>
<List sx={{ marginTop: 2 }}>
{filteredItems.map((item, index) => {
const Icon = item.icon;
return (
<ListItem disablePadding key={index}>
<ListItemButton
sx={{ borderRadius: 3 }}
component={NextLinkComposed}
to={{
pathname: item.path,
}}
>
<ListItemIcon>
<Icon />
</ListItemIcon>
<ListItemText primary={item.name} />
</ListItemButton>
</ListItem>
);
})}
</List>
</Box>
);
return (
<Box
component="nav"
sx={{ flexShrink: { md: 0 }, width: matchUpMd ? drawerWidth : "auto" }}
aria-label="mailbox folders"
>
<Drawer
container={container}
variant={matchUpMd ? "persistent" : "temporary"}
open={drawerOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
sx={{
"& .MuiDrawer-paper": {
width: drawerWidth,
background: theme.palette.background.default,
color: theme.palette.text.primary,
borderRight: "none",
},
}}
>
{drawer}
</Drawer>
</Box>
);
}
const SideBarItems = [
{
name: "Dashboard",
path: "/dashboard",
icon: DashboardIcon,
},
{ name: "Users", path: "/user", icon: GroupsIcon },
];

PLEASE HELP!
Thank You.

I have a workaround approach for this case (I use app router & SSG rendering). Based on this article from MUI official docs (https://mui.com/material-ui/guides/next-js-app-router/#next-js-and-react-server-components).

This approach need to set a state in localStorage as deviceWidth in the first load. Because localStorage is synchronous, it doesn't have any blocking.

ThemeProvider.tsx

"use client";
import createCache from "@emotion/cache";
import { useServerInsertedHTML } from "next/navigation";
import { CacheProvider } from "@emotion/react";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import React from "react";
import mediaQuery from "css-mediaquery";
const theme = createTheme({
components: {
MuiUseMediaQuery: {
defaultProps: {
ssrMatchMedia: (query) => ({
matches: mediaQuery.match(query, {
// The estimated CSS width of the browser.
width: localStorage.getItem("deviceWidth") || 1200, // Add this default prop
}),
}),
},
},
},
});
export default function ThemeRegistry(props: any) {
const { options, children } = props;
const [{ cache, flush }] = React.useState(() => {
const cache = createCache(options);
cache.compat = true;
const prevInsert = cache.insert;
let inserted: string[] = [];
cache.insert = (...args) => {
const serialized = args[1];
if (cache.inserted[serialized.name] === undefined) {
inserted.push(serialized.name);
}
return prevInsert(...args);
};
const flush = () => {
const prevInserted = inserted;
inserted = [];
return prevInserted;
};
return { cache, flush };
});
useServerInsertedHTML(() => {
const names = flush();
if (names.length === 0) {
return null;
}
let styles = "";
for (const name of names) {
styles += cache.inserted[name];
}
return (
<style
key={cache.key}
data-emotion={`${cache.key} ${names.join(" ")}`}
dangerouslySetInnerHTML={{
__html: styles,
}}
/>
);
});
return (
<CacheProvider value={cache}>
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
</CacheProvider>
);
}

layout.tsx

import ThemeRegistry from "./ThemeRegistry";
import "./styles.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
</head>
<body>
<ThemeRegistry options={{ key: "mui" }}>{children}</ThemeRegistry>
</body>
</html>
);
}

You can you use mui hidden component approach see here.You can create two seperate drawers and hide them acc to breakpoints using sx props.