Firefox下SSR加载缓慢求助：基于Mui v5与Tss-React

我将CSR网站迁移至采用Mui v5和Tss-React（使用JSS语法编写样式）的SSR架构，迁移完成后发现Firefox中首页初始加载耗时近15秒，子页面加载时间略短。但在Chrome、Edge等其他浏览器中，页面加载速度快20倍，表现完全正常。

我未使用Next.js、Razzle等SSR框架，仅通过Node+Express+React实现，因此不清楚问题根源；另外我有一个包含700行代码的style.js文件，其中是核心JSS对象，是否可能是此处导致的问题？

App.js #

import { makeStyles } from "tss-react/mui";
import styles from './styles'
[...]
const useStyles = makeStyles()(styles)

export default function App() {
  const location = useLocation();
  const { classes } = useStyles();

  return (
    <CookiesProvider>
        <div className={classes.responsiveMainContainer} >
          <TopMenu />
          <Routes>
            <Route exact path='/' element={<HomePage />} />

            <Route path='/vous-etes' element={<VousEtes />}>
              <Route path=':type/:supplyChoice' element={<VousEtes />} />
            </Route>

            <Route path='/nos-solutions' element={<Solutions />}>
              <Route path=':type' element={<Solutions />} />
            </Route>

            <Route path='/publications/:article?' element={<Publications />} />
            <Route path='/publications' element={<Publications />} />

          </Routes>
        </div>
       <Footer/>
    </CookiesProvider>
  );
}

client.js和server.js是根据Mui SSR指南以及TSS的SSR文档创建的。

client.js #

[...]
import theme from './styles/theme';
import createMuiCache from './createMuiCache';

const cache = createMuiCache();

function Main() {
  return (
    <CacheProvider value={cache}>
        <ThemeProvider theme={theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          <BrowserRouter>
            <App />
          </BrowserRouter>
        </ThemeProvider>
    </CacheProvider>
  );
}

ReactDOM.hydrateRoot( document.querySelector('#root'), <Main />);

server.js #

[...]

import renderFullPageExampleMui from './renderFullPageExampleMui.js'
import createMuiCache from './createMuiCache';
import { getTssDefaultEmotionCache } from "tss-react";
import theme from './styles/theme';

function handleRenderTSS(req, res) {
  const cache = createMuiCache();

  const emotionServers = [
    cache,
    getTssDefaultEmotionCache({ "doReset": true })
  ].map(createEmotionServer);

  const context = { };

  const html = renderToString(
    <CacheProvider value={cache}>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <StaticRouter context={ context } location={ req.url }>
            <App />
          </StaticRouter>
        </ThemeProvider>
    </CacheProvider>,
  );

  const styleTagsAsStr = emotionServers.map(
    ({ extractCriticalToChunks, constructStyleTagsFromChunks }) =>
    constructStyleTagsFromChunks(extractCriticalToChunks(html))
  ).join("");
    
  res.send(
    renderFullPageExampleMui(html, styleTagsAsStr)
  );
}

const app = express();

function returnStatic(req, res){
  res.sendFile(
    path.join(__dirname+ req.path)
  );
}

app
.use('/', express.static('public'))
.get('/*.(js|bmp|webp|png|jpg|svg|ico|gif)',returnStatic)
.use('/build', express.static('build'));

app.use(handleRenderTSS);

const port = 3000;
app.listen(port, () => {
  // eslint-disable-next-line no-console
  console.log(`Listening on ${port}`);
});

内容的提问来源于stack exchange，提问作者Evan Cadet