[material-ui][next] AppCacheProvider with Next v13 and v14 Pages Router causes flickering

fbozhkov commented 3 months ago

Steps to reproduce

I have a Nextjs app with Pages router, Typescript and Tailwind. I am following the Next integration guide Here is my _app.tsx

import "@/styles/globals.css";
import Head from "next/head";
import type { AppProps } from "next/app";
import { AppCacheProvider } from '@mui/material-nextjs/v13-pagesRouter';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { Nunito } from 'next/font/google';

const nunito = Nunito({
  weight: ['400', '500', '600', '700'],
  subsets: ['latin', 'cyrillic'],
});

const theme = createTheme({
  typography: {
    fontFamily: 'Nunito, sans-serif',
  },
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <AppCacheProvider>
      <Head>
        <link rel="icon" href="/tcfavicon.ico" />
      </Head>
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    </AppCacheProvider>
  )
};

and _document.tsx:

import { Html, Head, Main, NextScript, DocumentContext, DocumentProps } from "next/document";
import {
  DocumentHeadTags,
  documentGetInitialProps,
  DocumentHeadTagsProps,
} from '@mui/material-nextjs/v13-pagesRouter';

export default function Document(props: DocumentProps & DocumentHeadTagsProps) {
  return (
    <Html lang="en">
      <Head>
        <DocumentHeadTags {...props} />
        <meta name="emotion-insertion-point" content="" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Document.getInitialProps = async (ctx: DocumentContext) => {
  const finalProps = await documentGetInitialProps(ctx);
  return finalProps;
};

Current behavior

Whenever a page loads/reloads you can see the button component flickering.

https://github.com/mui/material-ui/assets/52756776/67328e37-72d1-4ca0-b882-1cd4f64b946a

I have also tested with Next v14 with same result. When I remove the AppCacheProvider from _app.tsx I don't get that problem.

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

``` System: OS: Windows 10 10.0.19045 Node: 21.7.1 - C:\Program Files\nodejs\node.EXE npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: 122.0.6261.129 Edge: Chromium (122.0.2365.92) npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.14 @mui/material: ^5.15.14 => 5.15.14 @mui/material-nextjs: ^5.15.11 => 5.15.11 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.14 @mui/types: 7.2.14 @mui/utils: 5.15.14 @types/react: latest => 18.2.69 react: latest => 18.2.0 react-dom: latest => 18.2.0 typescript: latest => 5.4.3 ```

Search keywords: AppCacheProvider

cglacet commented 2 months ago

I have the same behaviour, I have no idea what we are missing but clearly the css injection is not working on the server side.

You can clearly observe it by simply disabling javascript (client side), with the following code replacing <Component {...pageProps} />:

<ThemeProvider theme={theme}>
    <Button variant="contained">Test button</Button>
</ThemeProvider>

This buttons outputs:

<button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary mui-d00fc6-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button">Test button</button>

But if you look for any of these class names in the head of your page (while JS is disabled) you'll notice that none is present.

On the other hand, if we enable JS, we will have the CSS injected, something like this:

<head>
    <style data-emotion="mui" data-s="">.mui-f16x46-MuiButton-root{font-family:Nunito,sans-serif;}</style>
</head>

That means CSS is injected on the client side, which is why the SSR rendered page is not correct (which causes the flickering). I haven't found the solution to this yet. It's strange because the install steps are pretty simple so I'm not sure what I'm missing.

Maybe that's a version issue.

My environment

npx @mui/envinfo

```bash System: OS: macOS 13.6.1 Binaries: Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm pnpm: 8.6.6 - /opt/homebrew/bin/pnpm Browsers: Chrome: 124.0.6367.78 Edge: Not Found Safari: 17.1 npmPackages: @emotion/react: ^11.9.3 => 11.9.3 @emotion/styled: ^11.9.3 => 11.9.3 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.15 @mui/icons-material: ^5.8.4 => 5.8.4 @mui/material: ^5.15.15 => 5.15.15 @mui/material-nextjs: ^5.15.11 => 5.15.11 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @types/react: ^18.0.9 => 18.0.15 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.6.4 => 4.7.4 ```

siriwatknp commented 1 month ago

@fbozhkov You miss this line:

- export default function App({ Component, pageProps }: AppProps) {
+ export default function App({ Component, pageProps, …props }: AppProps) {
  return (
-    <AppCacheProvider>
+   <AppCacheProvider {…props}>
      <Head>
        <link rel="icon" href="/tcfavicon.ico" />
      </Head>
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    </AppCacheProvider>
  )
};

I think we could improve the docs by:

- Then, inside pages/_app.tsx, import the AppCacheProvider component and render it as the root element:
+ Then, inside pages/_app.tsx, import the AppCacheProvider component and render it as the root element (make sure to **pass the props** from `App` to the provider):

mui / material-ui