Material-ui SSR Remix example causes styles to be duplicated after hydration, should I de-dupe them?

user_11691682 0
Viewed 794

I've followed the following example: https://github.com/mui-org/material-ui/tree/master/examples/remix-with-typescript to set up material-ui with SSR on Remix, and I've noticed that after hydration, I get duplicated styles:

Above are the server-rendered style tags, below are the injected style tags Duplicate styles for an element

So I've been thinking if it would be beneficial to delete the server rendered styles after hydration? I came up with a simple solution of adding an attribute to the server rendered styles and then deleting them either in client.entry.tsx, or in a useEnhancedEffect in the root component, is there a preference, or should I not worry about the duplicated styles?

remix.run material-ui server-side-rendering reactjs
1 Answers

Please refer to this link for more details - this link

Try flushing the Server Side Stylesheets. It is a common practice to flush server side stylesheets at once the client side stylesheet is ready in all SSR based ReactJS libraries. So give it a try.

// Only executed on client
  useEnhancedEffect(() => {
    // re-link sheet container
    emotionCache.sheet.container = document.head;
    // re-inject tags
    const tags = emotionCache.sheet.tags;
    emotionCache.sheet.flush();
    tags.forEach((tag) => {
      // eslint-disable-next-line no-underscore-dangle
      (emotionCache.sheet as any)._insertTag(tag);
    });
    // reset cache to reapply global styles
    clientStyleData.reset();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

user_102276850
Related