使用 Material-UI 进行服务器渲染 - 之后删除 `jss-server-side`.. 工作流程不好?

sut*_*her 8 material-ui next.js

我确实将material-ui 与nextjs 一起使用。在material-ui的文档中,我找到了关于实现material-ui的#the-client-side :


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

  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}
Run Code Online (Sandbox Code Playgroud)

我想知道这是否是一个好的工作流程,因为所有生成的样式都会发送到客户端,并且只会与那里的 DOM 解耦。

在构建过程中删除它们 - 或者使用其他方式 - 这样样式至少不会发送给客户端不是更好吗?

顺便说一句: 我已将生成的样式复制到单独的文件中以检查文件大小。不必要的传输样式> 30kb!