Removing server-side injected CSS

Question

In this example of how to use Material UI with Next.js, they remove the server-side injected CSS when the component mounts in the browser. What's the advantage of that?

Answer 1

This is more of a CSS in JS construct when SSR is involved. Once the client is rehydrated it adds any new styles that are needed for that view, however any previously printed styles are not removed and they are simply removing them,

1. User lands on Page A - SSR for Page A maybe rendered inline for performance purposes.
2. User transitions to or moves to Page B, it has conflicting CSS from previous SSR rendering and may cause side effects or simply does not need the style object.