Prerender.io 不缓存我网站的 CSS

Question

我设置了Prerender.io来缓存我的网站，但当我查看缓存的页面时，它似乎只缓存页面布局，而不缓存样式表。结果相当难看，肯定会影响SEO。网页在web浏览器中看起来不错。

我使用React with Material UI来创建我的网页，以及在页面之间使用npm包react-router-dom。

我还为Express设置了一个小程序来提供我的页面。问题是，如果你转到URL/book，你会得到一个express静态404页面，而不是/book的React页面。因此，我使用regex模式将所有非扩展URL重定向到index.html。

app.use("/", (req, res, next) => {
// URLs that don't include extensions are assumed to be pages
// Render them with the /index.html.
const extRegex = /.w+/?$/
if (extRegex.test(req.url) === false) {
// Request url does not have an extension.
req.url = "/index.html"
}

next()
}, express.static(BUILD))

我的Prerender.io中间件被放置在此之前，因此在调用它时会传递未更改的req.url。

最后，有时我会看到警告"；页面在完全加载之前已强制布局。如果样式表还没有加载，这可能会导致未格式化内容的闪烁"在Firefox的控制台中。我一直不明白为什么会发生这种事。

感谢您的帮助！非常感谢。

Answer 1

我找到了一个解决方案。问题是MaterialUI使用的库情感js使用Javascript注入CSS。然而，CSS不会显示在DOM中，所以当页面被缓存时，它不会包括CSS。

对此的解决方案是设置"；快速的"；当它检测到页面正在服务器端渲染时，将情绪js设置为false。我通过检查用户代理以及它是否包含字符串"；prerender"；。然后，在React中工作时，要将speed设置为false，需要使用CacheProvider并创建缓存。

以下是解决方案的概要：

App.js

import { CacheProvider } from '@emotion/react';
import createCache from "@emotion/cache";
// Check if the user agent is Prerender. Speedy should be false if so.
const speedy = navigator.userAgent.toLowerCase().indexOf("prerender") === -1;
// Create an emotion cache
const emotionCache = createCache({
key: "emotion-cache",
speedy: speedy,
})
function App() {
return <CacheProvider value={emotionCache}>
...
</CacheProvider>
}
export default App