2

我已经使用create-react-appand构建了一个网络应用程序react-router。它由express后端的服务器提供服务，该服务器也运行 GraphQL API。网站的前端express使用以下代码提供服务：

// Sending React Frontend Build
app.use(express.static(`${__dirname}/../frontend/build`))
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, '../frontend/build/index.html'))
})

我现在意识到，当使用 CRA 时，网络爬虫和社交媒体网站无法轻松访问信息，因为页面的内容是由 javascript 注入的。

这个项目太晚了，我不能回去从nextjs.

一个简单的解决方案似乎是使用无头浏览器创建网站的预呈现版本，并仅通过其用户代理将此版本提供给爬虫。

为此，我尝试使用react-snap，它运行yarn build前端的 post 来创建静态 HTML 文件。虽然这主要是可行的（尤其是从网络爬虫的角度来看），但它似乎确实破坏了一些功能，因此对于人类用户，我仍然希望提供由创建的 SPA 捆绑包，yarn build并且只为爬虫提供静态 HTML 版本。

在后端由这样的东西实现：

// Sending React Frontend Build
app.use(express.static(`${__dirname}/../frontend/build`))
app.get('/*', (req, res) => {
  if (crawlerUserAgents.includes(req.headers['user-agent'])) {
    // serve pre-rendered static HTML version of the web app
  } else {
    // serve normal injected version of the web app
    res.sendFile(path.join(__dirname, '../frontend/build/index.html'))
  }
})

但是 的输出react-snap似乎无法在文件夹内的单独文件夹中创建站点的隔离静态版本build。所以我似乎无法为人类提供一个版本，而为网络爬虫提供一个版本。

有没有办法通过 Express usingreact-snap或类似的方式提供网站的静态版本？我知道对此有商业解决方案，但更喜欢通过express.

4

0 回答 0