我用styled-components实现了 SSR。
当页面加载 SSR 时，一切看起来都不错。但是，当app.js与 SSR 版本一起加载和冻结时，页面缺少一些样式，并且很少有元素中断。
更重要的是 - 当我在本地打开应用程序时，npm start或基本上只是删除我的 SSR，一切正常，样式被正确应用。
重要提示：当我进入页面并且app.js加载和样式被破坏时，如果我更改路线 - 新路线正确显示并应用了样式，问题是......逝。
- SSR 负载 -样式很好
- 然后在几秒钟后应用程序.js加载(水化过程( -样式被破坏
在本地运行应用程序- 样式没有问题
在没有 SSR 的情况下运行应用程序- 样式没有问题
所以简而言之 - 如果我使用 SSR 我缺少一些样式，SSR 本身会返回正确的样式，但在水合作用app.js几个组件后被破坏。
我敢打赌这可能是styled-components的问题.SSR 和其他所有内容都运行良好，除了缺少样式的一个组件。
我知道关于我的案例的信息相当不完整，但为了显示可能导致此错误的每个部分，我应该发布整个项目，但是也许您遇到过类似的情况，您会以某种方式帮助我。谢谢。
编辑：我的babel-styled-component-plugin配置：
['babel-plugin-styled-components', {
ssr: true,
displayName: false,
fileName: false,
transpileTemplateLiterals: false,
minify: false,
}],
两件事...
1(确保您使用的是babel插件;没有它，就不能保证生成的类名在服务器和客户端之间是相同的。
2( 在捆绑设置中，请确保对客户端和服务器使用几乎相同的 babel 配置。如果存在重大差异，并且文件以非常不同的方式进行转换，则可能会影响生成的类名输出。
我用 4 个步骤解决了
服务器.js
app.get('*', handleRender);
function handleRender (req, res) {
const activeRoute = routes.find((route) => matchPath(req.url, route)) || {};
const promise = activeRoute.fetchInitialData ?
activeRoute.fetchInitialData(req.path) :
Promise.resolve();
promise.then((data) => {
const context = { data };
const store = configureStore({});
const sheet = new ServerStyleSheet(); // ==== STEP -1
const preloadedState = store.getState();
const html = renderToString(
sheet.collectStyles( // === STEP --2
<Provider store={store}>
<StaticRouter location={req.url} context={context}>
<App/>
</StaticRouter>
</Provider>
)
);
const styles = sheet.getStyleTags(); /// === STEP 3
res.send(renderFullPage(html, styles, preloadedState));
});
function renderFullPage (html, styles, preloadedState) {
return `
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>body,html,div,ul,p{margin:0;padding:0;}</style>
<title>Characters of Rick And Morty Show</title>
<style>
${globalStyles}
</style>
${styles} // === STEP 4
</head>
<body>
<div id="root">${html}</div>
<script>
// WARNING: See the following for security issues around embedding JSON in HTML:
// https://redux.js.org/recipes/server-rendering/#security-considerations
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(
/</g,
'\u003c'
)}
</script>
<script src="client_bundle.js"></script>
</body>
</html>
`;
}
客户
hydrate(<BrowserRouter>
<Provider store={store}>
<App/>
</Provider>
</BrowserRouter>, document.getElementById('root'));