Server Rendering with Material-UI - removing `jss-server-side` afterwards.. bad workflow?

I do use material-ui with nextjs. In the documentation of material-ui I found this #the-client-side about implementing material-ui:

function Main() {
  React.useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}

I wonder if this is a good workflow, as all the generated styles are shipped to the client and only will be decoupled from the DOM there.

Wouldn't it be much better to remove them within the build-process - or use another way - so that the styles won't be send to the client at least?

BTW: I've copied the generated Styles to a seperate file to check the filesize. The unnecessary transfered styles are > 30kb !!