javascript Prerender.io 不缓存我的网站的CSS

qgelzfjb 于 2023-01-08 发布在 Java

关注(0)|答案(1)|浏览(136)

我设置了Prerender.io来缓存我的网站，但是当我查看缓存页面时，它似乎只缓存了页面布局而没有缓存样式表。结果相当难看，肯定会影响SEO。页面在Web浏览器中看起来很好。
我正在使用React with Material UI创建我的网页，以及npm包react-router-dom在页面之间移动。
我也有一个小的janky设置Express服务我的页面.问题是，如果你去到网址/book你会得到一个express静态404页面，而不是为/book的React页面.所以我重定向所有非扩展URL到index.html使用regex模式.

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的控制台上看到警告“页面完全加载之前强制布局。如果样式表尚未加载，这可能会导致未样式化内容的 Flink 。”我一直无法弄清楚为什么会发生这种情况。
任何帮助都很感激！谢谢。

JavaScript

来源：https://stackoverflow.com/questions/73954622/prerender-io-does-not-cache-my-sites-css

1条答案

按热度按时间

nhn9ugyo1#

我找到了一个解决方案。问题是Material UI使用的库emotion-js使用Javascript注入CSS。但是CSS不会显示在DOM中，所以当页面被缓存时，它不会包含CSS。
这个问题的解决方案是当emotion-js检测到页面正在服务器端呈现时，将其“speedly”设置为false。我通过检查用户代理以及它是否包含字符串“prerender”来完成此操作。然后，要在使用React时将speedly设置为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

赞(0）回复(0）举报 2023-01-08

我来回答

javascript Prerender.io 不缓存我的网站的CSS

1条答案

相关问题

热门标签

最新问答