What causes materialui styles to vanish upon refreshing in nextjs?

Question

What causes materialui styles to vanish upon refreshing in nextjs?

After consulting the materialui documentation (https://material-ui.com/guides/server-rendering/), I was able to find a solution, but I am still unsure of the underlying reason.

Why does the style work initially during rendering but disappear upon subsequent renderings? According to SSR, the CSS is supposed to be included in the html template delivered to the client with each request, so theoretically, the style should remain.
The documentation mentions that "On the client side, the CSS will be injected a second time before removing the server-side injected CSS." However, it is unclear why this removal process is necessary. The CSS is already injected into the html template for each request, so it shouldn't lead to any crashes in theory. Why, then, does the style vanish once the injected CSS is removed?

css material-ui next.js server-side-rendering

Answer 1

Answer №1

If you're using styled-components, simply follow these steps to get started:

Step 1: Install babel-plugin-styled-components as a dev dependency by running npm install --save-dev babel-plugin-styled-components

Step 2: Create a file named .babelrc in the root directory of your Next.js project

Step 3: Add the following code to your .babelrc file:


{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

Step 4: Restart your Next.js server

Answer 2

If you're using styled-components, simply follow these steps to get started:

Step 1: Install babel-plugin-styled-components as a dev dependency by running npm install --save-dev babel-plugin-styled-components

Step 2: Create a file named .babelrc in the root directory of your Next.js project

Step 3: Add the following code to your .babelrc file:


{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

Step 4: Restart your Next.js server

Answer 3

Answer №2

After making some adjustments to my next.config.js file, everything suddenly started working perfectly. The reasons behind its functionality are a bit fuzzy for me at the moment.

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    compiler: {
    // https://nextjs.org/docs/advanced-features/compiler
        // For more information on these options, refer to https://styled-components.com/docs/tooling#babel-plugin.
        styledComponents: true,
    },
};

module.exports = nextConfig;

Answer 4

After making some adjustments to my next.config.js file, everything suddenly started working perfectly. The reasons behind its functionality are a bit fuzzy for me at the moment.

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    compiler: {
    // https://nextjs.org/docs/advanced-features/compiler
        // For more information on these options, refer to https://styled-components.com/docs/tooling#babel-plugin.
        styledComponents: true,
    },
};

module.exports = nextConfig;

Answer 5

Answer №3

inside _app.js

  function MyApp({ Component, pageProps }) {
  useEffect(() =>{
     const jssStyles = document.querySelector('#jss-server-side');
    if(jssStyles){
      jssStyles.parentElement.removeChild(jssStyles);
    }
  },[]);

  return <Component {...pageProps} />
};

next step is to navigate to _document.js located in the pages folder :

import React from 'react';
import { ServerStyleSheets } from "@mui/styles";
import Document, { Html, Main, NextScript, Head } from "next/document";

export default class MyDocument extends Document{

    render(){

        return(
            <Html lang="en">
                <Head></Head>
                <body>
                    <Main/>
                    <NextScript/>
                </body>
            </Html>
        )
    }
}

MyDocument.getInitialProps = async(ctx) =>{
    const sheets = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;
    ctx.renderPage = () =>{
        return originalRenderPage({
            enhanceApp: ( App ) => ( props ) => sheets.collect(<App { ...props} />)
        })
    };
    const initialProps = await Document.getInitialProps( ctx);
    return{
        ...initialProps,
        styles:[
            ...React.Children.toArray(initialProps.styles),
            sheets.getStyleElement(),
        ]
    }
}

Answer 6

inside _app.js

  function MyApp({ Component, pageProps }) {
  useEffect(() =>{
     const jssStyles = document.querySelector('#jss-server-side');
    if(jssStyles){
      jssStyles.parentElement.removeChild(jssStyles);
    }
  },[]);

  return <Component {...pageProps} />
};

next step is to navigate to _document.js located in the pages folder :

import React from 'react';
import { ServerStyleSheets } from "@mui/styles";
import Document, { Html, Main, NextScript, Head } from "next/document";

export default class MyDocument extends Document{

    render(){

        return(
            <Html lang="en">
                <Head></Head>
                <body>
                    <Main/>
                    <NextScript/>
                </body>
            </Html>
        )
    }
}

MyDocument.getInitialProps = async(ctx) =>{
    const sheets = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;
    ctx.renderPage = () =>{
        return originalRenderPage({
            enhanceApp: ( App ) => ( props ) => sheets.collect(<App { ...props} />)
        })
    };
    const initialProps = await Document.getInitialProps( ctx);
    return{
        ...initialProps,
        styles:[
            ...React.Children.toArray(initialProps.styles),
            sheets.getStyleElement(),
        ]
    }
}

What causes materialui styles to vanish upon refreshing in nextjs?

Answer №1

Answer №2

Answer №3

Similar questions

What is preventing this code from setting the background color of the main content all the way to the bottom of the

Optimizing server layout components with NextJS's on-demand revalidation feature

Implementing a dynamic top navbar that transitions to the side on desktop with Bootstrap

Unexpected character appearing in Android 2.3, whether using the li or ul tag

Is it possible to have 3 divs with the height of the tallest

The expected result of getInitialProps() is an object, however it returned "undefined" instead

Discover the steps to develop a dynamic circular progress indicator capable of visualizing data for three distinct values utilizing Mui CircularProgress

Every time I rotate my div, its position changes and it never goes back to

Issue with Bootstrap4: organizing columns correctly within and outside a container

In the realm of typesetting, a punctuated line gracefully weaves its way between two

Stop the anchor tag from activating Chrome's status bar

Obtaining hyperlinks to encircle the sound button

flexbox wrapping text styling

Material-UI - Access all available Menu Items by clicking on the Menu Button

Switch up the background image of the <li> element when the <a> tag is clicked

What is the best way to create transparency within an icon's background without affecting the surrounding box?

unable to modify background color when mouse hovers in CSS

Tips for enhancing the appearance of the dropdown scrollbar in PrimeNG

Extending an element beyond the boundaries of its container

What are some ways to display multiple divs within a single popup window?