问题标签 [react-snap]

我想从 react-snap 预渲染构建中排除对讲脚本（我认为是 JS 和 CSS，但是是 400KB 的字符串化代码）。

所有其他脚本都已被排除在外，但 Intercom 不能并且正在破坏我的预渲染和 SEO，并使预渲染的脚本比需要的大得多。

我在 package.json 中设置了排除参数：
“reactSnap”：{“destination”：“build/pre-rendered”，“removeScriptTags”：true }，这排除了所有其他脚本。

对讲机在 index.html 中加载：

(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{ var d=document;var i=function(){ic(arguments);};iq=[];ic=function(args){iqpush(args);};w.Intercom=i;var l=function() {var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src=' https://widget.intercom.io/widget/ ' + 'APP_ID ';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else {w.addEventListener('load',l,false);}}})();

或者子组件中的 react-intercom 组件通过：>Intercom appID= 'APP_ID'/>

任何帮助将不胜感激 - 谢谢

所以，我的理解是 react-snap 根据其功能“与 create-react-app 一起开箱即用 - 无需更改代码”。

我通读了文档，发现它需要一些调整才能与我实施的 Google Analytics 一起使用。

但是，如果要使用 CRA 附带的默认服务工作者，它也建议进行更改。

https://github.com/stereobooster/react-snap#service-workers

然而，令人困惑的是，似乎必须执行 EJECT 才能进行必要的更改。

navigateFallback: publicUrl + '/index.html',

您需要将其更改为 index.html - 200.html 的未预渲染版本，否则您将在其他页面上看到 index.html 闪烁（如果有的话）。有关详细信息，请参阅在不弹出的情况下配置 sw-precache。

我的问题是 - 请注意我是新手 - 是否必须弹出？我有点想保持简单。我能找到这条线的唯一地方是在 WebPack 中。导航回退

另外，如果我没有根据文档在页面上看到闪烁的负面影响，是否可以省略此步骤，或者它会在其他方面有问题吗？

我正在使用 react 来开发我的项目，并且正在尝试使用 React-snap 预渲染它。

当我尝试构建我的项目时，react snap 将在项目中爬行并从路由创建一个 html。但是有一个问题，当我部署构建的项目时，它会先加载主页，然后再在每个路由中加载正确的页面。

我正在尝试使用 reactJS 和无头 CMS Wordpress 构建网站。

这是我的 App.js 代码：

当运行 npm run build 生产版本不起作用时，我正在使用 react-snap 生成静态页面，它也不起作用我收到错误：

console.log at /: 加载资源失败：net::ERR_FAILED

我是 reactJS 的新手，请任何人都可以提供帮助。

谢谢，乙

我有一个基于 react 和 react-router-4 的简单项目 SPA 应用程序。我的项目中有多个路由，例如：

• www.mySite/build/#/
• www.mySite/build/#/page1/page12
• www.mySite/build/#/page2

当我使用 react-snap 预渲染我的项目并在浏览器中打开路由时，仅预渲染了主路由 (www.mySite/build/#/)，因此谷歌机器人无法抓取其他路由和页面。

我的 package.json 配置：

我的 webpack 配置：

index.js：

应用程序.js：

page1中的代码：

其他页面类似于page1。

我正在尝试 react-snap ，它的工作原理是将页面转换为静态版本并提供服务，但随后 React 加载然后重新加载/重新渲染所有内容。

1）这是预期的还是有什么方法可以防止在 React 加载后重新加载/重新渲染？
2）这如何与 SEO 一起工作 - 谷歌会得到静态版本，索引它，然后稍后运行 JS 和索引 React JS 版本吗？
3) Google 会认为加载时间是多少？最初预渲染的静态页面还是下载 JS 并重新渲染页面的时间？

我所拥有的是指向列表的路由，其中​​实际内容是从 API 调用中检索的。例如 /listing/1、/listing/2 等。

在 React 组件中，我有一个 ComponentDidMount()，它从 API 调用中检索列表详细信息，并且 render() 方法在其渲染中使用这些详细信息。

尝试运行 react-snap 时出现以下错误，我可以看到很多人遇到了类似的问题，但到目前为止我还没有看到解决此问题的解决方案。

它构建到一个名为 dist 的文件夹并删除整个文件夹它仍然会生成此错误

我怎样才能修复这个错误？

包.json

路线

我正在使用 react-snap 预渲染我的网站，在我的index.html文件中我有以下代码

但是它输出的代码如下

如何更改它以使其正确输出？

我正在尝试在 ubuntu 18 中使用此命令 'sudo npm install --save-dev react-snap' 安装 react-snap 它给了我错误

搜索后我会得到运行这个命令的解决方案

仍然运行此命令后，我面临此错误，我的反应版本是 16.8

我的反应应用程序在后台运行了一个视频。它可以完美运行并在页面加载时自动播放。

这是我使用的代码 JSX。

我使用后它不会自动播放react-snap。我的 package.json 看起来像这样：

我删除后它可以工作"postbuild": "react-snap",。如何在不删除的情况下解决（加载时自动播放视频）这个问题react-snap？