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

The width of the HTML page seems to adjust or shift when I click on

Having trouble with Next.js, authLink, httpLink, and GraphQL subscription integration

What causes the accordion class to activate panels with varying names?

conceal elements created with JQuery within an AJAX function

Is Turbopack compatible with frameworks other than NextJs?

What is the best way to adjust image size based on different screen sizes while ensuring the buttons at the top remain responsive

I am encountering issues with setting a background image in Bootstrap 3.1.1 while trying to achieve a par

"Is there a way to target an element within another element that has inline styles using

Reset the queue for the slideDown animation using jQuery

Unexpected Placement of CSS Grid Items

Guide to setting up a node.js server that serves HTML files with CSS styling

Attempting to divide the main page into quadrants

Locate the closing anchor tag following the image

Troubleshooting the issue with generateStaticParams() in NextJs/TypeScript

The width of the Div is set to 100%, yet there is still some empty space visible on

Divs gracefully appear one after the other in a sequential manner

Getting the first validation message from Input in React: What you need to know

Simulating server-side interactions in Node.js with TestCafe

why is it that I am not achieving the expected results in certain areas of my work?

What is the process of setting up a proxy for Clerk authentication in a Next.js/Vercel application?