问题标签 [react-snap]

我需要启动一个 react 应用程序，我需要预渲染和路由，所以我安装了 react-snap 和 react-router。（很明显，react-router 进行路由和 react-snap 进行预渲染）。

使用“npm start”在本地看起来一切都很好，但是当我进行生产构建并提供服务时，路由链接会使页面重定向到新的 url，所以我总是看到的是主页。

我的渲染看起来像这样：

这是 react-snap 建议的我的 index.js

有任何想法吗？

我一直在尝试将 react-snap 与我的 create-react-app 项目集成。我遇到的问题似乎源于 index.js 文件中的 registerServiceWorker() 行。

我观察到的行为是，当存在 registerServiceWorker() 行时，应用程序构建并且我能够正常导航，但预渲染文件仅填充：

控制台充满了：

当我注释掉 index.js 中的 registerServiceWorker() 行时，react-snap 运行时没有错误并按应有的方式预渲染所有内容，但我无法离开“/”路线。尝试去任何其他路线会自动重新路由我。

我感觉我可能需要对 create-react-app 附带的 registerServiceWorker.js 文件进行一些调整，或者使用 react-snap 更改选项。

我一直在使用 1.21 版的 react-snap 作为参考。

任何有方向的想法都会很棒。

我在我的 React 应用程序中使用 react-snap 包，它基本上可以生成整个应用程序的静态形式。但它实际上会抓取所有 AJAX 数据并获取它们，然后构建静态站点。但我希望 react-snap 跳过一些 AJAX 请求。我希望我的应用程序在客户端打开静态页面时发出这些请求。

安装 react-snap 预渲染库并运行 npm run build 后，我收到以下错误：

关于可能导致它的原因或如何解决的任何想法？

我有一个以下列方式工作的应用程序：

• 客户端包使用 webpack 构建并输出到/client/app/public/build.
• Express 服务器从 /server/index.js 运行并使用一些环境变量呈现车把模板。

在我运行yarn run build并postbuild执行脚本后，它立即失败并出现以下错误：

这是有道理的，因为该位置没有文件。

我知道它react-snap以零配置库而自豪，但我真的很想配置它，以便它可以指向正确的目录来提供文件。此外，Express 服务器提供了一个身份验证库，因此也需要运行。

期望react-snap可以做到这一点并且仍然抓取和预渲染网站是否现实？还是我应该探索其他选择？

在 CRA 应用程序上进行部署react-snap几乎是无痛的，极大地提高了页面加载速度，并且需要零专门配置。

但是，我偶尔会看到部署（本地和来自 netlify）仅爬取单个页面然后看起来已完成的问题。像这样：

正常结果（可能是 50% 的时间）意味着爬取了大约 50 个页面，然后其他所有内容都成功完成。

我尝试将并发限制为 1 而没有改进。我可以使用哪些其他工具来解决这个问题，或者我可以包含哪些配置选项来解决这个问题？

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

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

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

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

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

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

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

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

我正在尝试使用 react-snap 从反应应用程序填充静态页面，并且在每个页面上都不断收到此错误。

我没有在网上找到任何关于此错误的信息，与“VM1516 integrator.js”相同。

知道是什么原因造成的吗？

我正在使用您的 react-native Snap carousel，效果很好，但我正在尝试从 API 获取数据，它有效，但它在一张卡片中显示了总数据。如何单独显示？

这是代码：

List.js

SliderEntry.js

它在一张卡中显示所有获取的数据。任何人请帮助我！

我正在搞乱使用react-snap来预渲染我的新博客，除了一些事情之外，一切都非常出色。

出于某种原因，脚本被包含在标题中，但我能够将async属性应用于这些脚本，所以这没什么大不了的。但后来我意识到，我的大部分脚本一开始就没有理由被包含在内……

博客中没有动态内容，全是 CSS/HTML，我只使用 React 来简化开发 - 但是，我的 HTML 中仍然包含 Markdown 库，react-dom还有react-router.

鉴于此 package.json：

在我所有预先生成的帖子的底部，我有：

但！（除了可能的 highlight.js）它们都没有被使用！

注意：我知道将 JS 文件放在正文的底部并标记它们async可能是多余/不必要的，但由于某些原因，在捕捉后，这些 JS 文件有时会放在标题中（我不知道为什么） - 所以为了性能安全，我react-snap将它们标记为异步。

有什么办法可以停止包含我的任何/所有/某些 JS 文件？我知道我可以手动执行此操作，或者通过对 100 多篇文章进行一些后期处理，但我觉得这也必须是 puppeteer 或 react-snap 的一部分。

编辑：叹息......像往常一样，即使我之前搜索过这个，在发布 SO 帖子 5 分钟后 - 我遇到了一个部分答案：removeScriptTags: true在react-snappackage.json

这满足了我想删除所有脚本的情况，但是，有没有部分解决方案？例如，假设我想把这个博客变成 PWA - 因此可能需要注册一个服务工作者（或者我可能遇到另一个需要 1-2 个 JS 文件的用例）