Components flicker during server side render for nextjs

[siamahnaf]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Material-ui problem with next js typescript. Here is issued with flickered.

How can I solve this.

Here is my project- https://github.com/siamahnaf198/ebuy-ts

This is live link- https://ebuy-ts.vercel.app/

[mnajdova]

I can't notice any flickering on the link that you shared. Also it is different than the project you have on the gif.

[siamahnaf]

@mnajdova, I can see flickering problem easily. Why are you not seeing?

[mnajdova]

@siamahnaf198 I could reproduce. Looks like an issue with the latest version of next - vercel/next.js#36675 Could you verify that it works by using next@12.1.7-canary.5 as described in the issue? That fixed things for me locally.

[selvamk-js]

I have the same issue, and I spent a lot of time upgrading from MUIv4 to MUIv5 now I got this issue. the issue persists with next@12.1.7-canary.5, reverting to react@17.0.2 fixed this but that brought other problems for another package during the production. I need react@18, seems like I am stuck in between this issue.

[siamahnaf]

@selvamk-js. Hey someone suggested me to chnages some in _document.tsx

https://stackoverflow.com/questions/72248724/components-flicker-during-server-side-render-for-nextjs-and-material-ui/72268985#72268985

Can you try it and let me know if works perfectly.
I am liitle bit busy now.

[selvamk-js]

@siamahnaf198 If I am not wrong, the aim here is to stop using the legacy styles right. But the StackOverflow answer has this code const sheets = new ServerStyleSheets(); which is exported from @mui/styles. This is to support the JSS styling solution as per this MUI doc. But I am not using the JSS styles I am using the emotion for the styling. I don't want to install a new package (legacy one) to fix the SSR issue.

[mnajdova]

@selvamk-js please share a repository showing the issue. For the repository shared in the original issue description, this version of next solves the problem.

[selvamk-js]

@selvamk-js please share a repository showing the issue. For the repository shared in the original issue description, this version of next solves the problem.

Sure, I will prepare and share it with you.

[siamahnaf]

@mnajdova, Someone suggest me to use this type of code in _document.tsx-

MyDocument.getInitialProps = async (ctx) => {
    const sheets = new ServerStyleSheets();

    const originalRenderPage = ctx.renderPage;

    // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
    // However, be aware that it can have global side effects.
    const cache = createEmotionCache();
    const { extractCriticalToChunks } = createEmotionServer(cache);

    ctx.renderPage = () =>
        originalRenderPage({
            enhanceApp: (App: any) =>
                function EnhanceApp(props) {
                    return sheets.collect(<App emotionCache={cache} {...props} />);
                },
        });

    const initialProps = await Document.getInitialProps(ctx);
    // This is important. It prevents emotion to render invalid HTML.
    // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
    const emotionStyles = extractCriticalToChunks(initialProps.html);
    const emotionStyleTags = emotionStyles.styles.map((style) => (
        <style
            data-emotion={`${style.key} ${style.ids.join(' ')}`}
            key={style.key}
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{ __html: style.css }}
        />
    ));

    return {
        ...initialProps,
        styles: [...emotionStyleTags, sheets.getStyleElement()],
    };
};

is this okay, or have any disagree?

[selvamk-js]

@mnajdova,

Sample SSR Test Repo: https://github.com/selvamk-js/ssr-test, this has the exact setup I have in my other project.
This issue does not happen during dev mode, it happens when I move to production, I have deployed the above project in Vercel here's the URL: https://ssr-muiv5-test.vercel.app/.
It would be appreciated if you point out the issue/provide any guidelines.

ssr.mov

Note: I have tried commenting the <StyledEngineProvider injectFirst> in the _app.tsx that fixed the bigger distortion but still the font in the data table switching from Lato to system-ui is still a distortion.

[pixelass]

This seems to be an issue with next.js >= 12.1.6
We reverted to next@12.1.5 to handle this issue.

What causes this issue:

We are unsure about the origin of this issue, but the CSS is not server side rendered. You can see that by viewing the page source of any of the links/examples provided above.

Here are two screenshots of our test page's source:

v12.1.5

v12.1.6

[mnajdova]

Everyone, let's wait for 12.1.7 of next to be released and test again. Until then, please downgrade to 12.1.5, thanks!

[oliviertassinari]

To flag and close as a duplicate of #30410?