Adjust properties based on screen size with server-side rendering compatibility

Question

Adjust properties based on screen size with server-side rendering compatibility

I'm currently using the alpha branch of material-ui@v5.

At the moment, I have developed a custom Timeline component that functions like this:

const CustomTimeline = () => {
  const mdDown = useMediaQuery(theme => theme.breakpoints.down("md"));

  return (
    <Timeline position={mdDown ? "right" : "alternate"}>
      {/* some children */}
    </Timeline>
  );
};

Although it works mostly as intended, mobile users might encounter layout shifts due to the fact that useMediaQuery relies on JavaScript and is only executed client-side. I am searching for a CSS-based solution that can be used with Server-Side Rendering (SSR).

One potential approach I've considered is:

const CustomTimeline = () => {

  return (
    <Fragment>
      <Timeline sx={{ display: { xs: "block", md: "none" } }} position="right">
        {/* some children */}
      </Timeline>
      <Timeline sx={{ display: { xs: "none", md: "block" } }} position="alternate">
        {/* some children */}
      </Timeline>
    </Fragment>
  );
};

This solution should work because the sx prop gets converted into emotion styling and gets included in the HTML file. However, this method will increase the size of the DOM. Are there any better alternatives to achieve the same result?

javascript reactjs material-ui server-side-rendering breakpoints

Answer 1

Answer №1

I encountered a similar issue in the past while utilizing Next.js for SSR, however, the solution is not dependent on that.

Start by installing this package and importing it into your root file, such as App.js

import mediaQuery from 'css-mediaquery';

Next, create a function to pass ThemeProvider of material-ui

const ssrMatchMedia = useCallback(
        (query) => {
            const deviceType = parser(userAgent).device.type || 'desktop';
            return {
                matches: mediaQuery.match(query, {
                    width: deviceType === 'mobile' ? '0px' : '1024px'
                })
            };
        },
        [userAgent]
);

Make sure to provide the userAgent!

Then, include ssrMatchMedia in MuiUseMediaQuery

<ThemeProvider
    theme={{
        ...theme,
        props: {
            ...theme.props,
            MuiUseMediaQuery: {
                ssrMatchMedia
            }
        }
    }}>

This approach should function correctly. I am utilizing an older version of material-UI instead of v5. The name MuiUseMediaQuery might be different, but this method has been effective for me thus far. Feel free to inform me if you encounter any issues.

Answer 2

I encountered a similar issue in the past while utilizing Next.js for SSR, however, the solution is not dependent on that.

Start by installing this package and importing it into your root file, such as App.js

import mediaQuery from 'css-mediaquery';

Next, create a function to pass ThemeProvider of material-ui

const ssrMatchMedia = useCallback(
        (query) => {
            const deviceType = parser(userAgent).device.type || 'desktop';
            return {
                matches: mediaQuery.match(query, {
                    width: deviceType === 'mobile' ? '0px' : '1024px'
                })
            };
        },
        [userAgent]
);

Make sure to provide the userAgent!

Then, include ssrMatchMedia in MuiUseMediaQuery

<ThemeProvider
    theme={{
        ...theme,
        props: {
            ...theme.props,
            MuiUseMediaQuery: {
                ssrMatchMedia
            }
        }
    }}>

This approach should function correctly. I am utilizing an older version of material-UI instead of v5. The name MuiUseMediaQuery might be different, but this method has been effective for me thus far. Feel free to inform me if you encounter any issues.

Answer 3

Answer №2

In order to prevent the initial rendering before useMediaQuery is launched, it is recommended to follow the advice from the Reactjs documentation. One option is to move that logic to useEffect if it is not essential for the first render. Another approach is to delay displaying that component until after the client renders, especially if the HTML appears broken until useLayoutEffect runs.

To avoid including a component that relies on layout effects in the server-rendered HTML, you can conditionally render it using showChild && and defer its display with useEffect(() => { setShowChild(true); }, []). By doing this, the UI will not appear broken before hydration.

Answer 4

In order to prevent the initial rendering before useMediaQuery is launched, it is recommended to follow the advice from the Reactjs documentation. One option is to move that logic to useEffect if it is not essential for the first render. Another approach is to delay displaying that component until after the client renders, especially if the HTML appears broken until useLayoutEffect runs.

To avoid including a component that relies on layout effects in the server-rendered HTML, you can conditionally render it using showChild && and defer its display with useEffect(() => { setShowChild(true); }, []). By doing this, the UI will not appear broken before hydration.

Adjust properties based on screen size with server-side rendering compatibility

Answer №1

Answer №2

Similar questions

Error when compiling TypeScript: The callback function provided in Array.map is not callable

Store the beginning and ending times in a MySQL database using Sequelize and Node.js

Is it possible to use the same HTML select/dropdown menu for multiple rows in a table?

Leverage the power of Next.js to dynamically render a specific section of an HTML webpage

Issues with Three.js raycaster intersectObjects

Storing Byte Array in a File using JavaScript

What is the best way to retrieve a response from a PHP file as an array through Ajax?

Looking to utilize flash player within React Electron Web View

When attempting to click on my subtopics using jQuery, they do not appear as expected

Why will the experimental activation of React concurrent features in Nextjs 12 disable API routes?

When the react button is clicked, there is no feedback or message displayed

Failed to retrieve information using a custom header in the HTTP request

The Node.js application gracefully exited with code 0 with Forever

Is the original image source revealed when clicked?

When I type text into the form field, JavaScript causes a disruption in the form

Demonstrating various elements within an application using Vue3

Struggling with defining the default value for a JavaScript array

Steps for assigning an id to an element using Selenium

Following a POST request, the redirection functionality in Next.js seems to be malfunctioning

What steps should I take to troubleshoot and resolve the connection issue that arises while trying to execute npm install