问题标签 [react-snap]

我们使用 React Native Web 创建了一个 Web 应用程序。我们想为我们的应用程序添加服务器端渲染。我们添加了一个代码来呈现页面服务器端，但它不起作用，我可以在网络预览选项卡中看到空白页面，服务器只发送我的 index.html 文件作为响应。

我还尝试了用于服务器端渲染的 react-native-web 服务器 API，但它返回空的 div 标签，如下所示：

我使用了与 react-native webserver API 相同的代码（https://necolas.github.io/react-native-web/docs/rendering/#server-api）

我发现一些文章建议使用应用程序的预渲染。为了向我们的应用程序添加预渲染，我尝试了 react-snap （https://www.npmjs.com/package/react-snap），创建了一个快照，但是当我启动应用程序时，它只加载了第一页（登陆页面）该应用程序，此页面上没有任何事件（单击事件）并且样式也丢失，无法在应用程序中导航。

然后我尝试了 react-snapshot （https://www.npmjs.com/package/react-snapshot），但它每次都会抛出构建错误并且没有生成我们应用程序的快照。

期望：应用程序应该是服务器端渲染的，我应该在网络预览中看到页面的快照，服务器应该在响应中返回页面的快照。

任何人都可以提出解决此问题的解决方案吗？服务器端渲染如何反应原生 Web 应用程序？

我们使用 React Native Web 创建了一个 Web 应用程序。我们想为我们的应用程序添加服务器端渲染。我们添加了一个代码来呈现页面服务器端，但它不起作用，我可以在网络预览选项卡中看到空白页面，服务器只发送我的 index.html 文件作为响应。

我发现一些文章建议使用应用程序的预渲染。为了向我们的应用程序添加预渲染，我尝试了 react-snap （https://www.npmjs.com/package/react-snap），创建了一个快照，但是当我启动应用程序时，它只加载了第一页（登陆页面）该应用程序，此页面上没有任何事件（单击事件）并且样式也丢失，无法在应用程序中导航。

期望：应用程序应该是服务器端渲染的，我应该在网络预览中看到页面的快照，服务器应该在响应中返回页面的快照。

任何人都可以提出解决此问题的解决方案吗？

我react-snap用来预先生成我的网站内容，而不是客户端渲染。

构建项目后，当我手动编辑时index.html，仅当编辑的元素在外部时才会应用更改<div id="root"/>。

我可以在;的底部添加scripts和meta标签 但是当我编辑. 当我检查站点时，内容没有改变，但文件内的代码不同。<head/><body/><div id="root"/>html

是什么导致了这种行为，我该如何绕过它？

我在客户端文件夹中创建了一个带有内容 api 的博客，其中 api 密钥位于 .env.devlopment 文件中。我还有一个 .env 文件来将我的 api 密钥保存在同一个客户端文件夹中。当我测试我的反应站点时，我可以看到我的所有内容并上传音频，但是npm run build在终端中运行时出现问题。Expected parameter accessToken我在 localhost 中没有错误，但是在准备部署到 heroku 时收到错误消息。我ReactDOM从我的 index.js 文件中的 ReactDOM.render 中删除，我收到一个关于替换对 ReactDOM.render 的调用的问题。

contentful.js 文件：

运行时终端出错npm run build

当我运行 console.log(process.env); 我收到

客户端.env

client.env.development

我在 package.json 中设置了以下配置：

然而，当yarn build抛出此消息时。

我想知道为什么 react-snap 会调用 Google Maps API，因为skipThirdPartyRequests: true.

完整日志在这里：

我正在尝试为我的静态 React 应用程序做一些 SEO。问题是react-snap我用于预渲染只预渲染我的应用程序的首页，因为默认情况下它会向用户打开并且在用户按下按钮之前不会改变。这是我的代码示例：

不幸的是，react-snap 只预渲染“home”组件。我知道这一点是因为我使用在线搜索引擎模拟器工具检查了我的网站，并且只有h2主页上的元素对搜索引擎可见。我也尝试通过使用 React 路由器为每个页面设置路由来解决这个问题，但到目前为止还没有帮助。如何预渲染我的整个应用程序以使其对 Google 可见？谢谢

编辑：我的index.js样子是这样的：

我遇到了 react-snap 的问题。react-snap 的最后一次更新是在 3 年前。它有点过时了。似乎 react-snap 未能在反应页面上抓取我的 pdf 文件。

这是产生的错误反应快照：

当我尝试在 mhart/alpine-node:14 容器中构建我的 react-app 时，就会发生这种情况。

这是我的 Dockerfile：

我在这里错过了什么？如果这个问题不能解决。react-snap 有其他选择吗？

最近搬到了一个反应网站上的 react-snap （所以如果有人分享我作品的链接，我可以过那个元标记预览生活）。

我遇到的一个奇怪问题是我的未链接页面，尤其是我的 404 页面正在从我的主页加载一些内容，并且没有更新为页面的正确 id 标签、英雄图像或正确的 CSS 样式。

我有一个链接页面（类似于您在社交上看到的链接树页面），该页面之前已损坏，当我将该页面添加到站点导航时，它现在可以正确呈现。

关于如何正确加载 404 页面的任何想法？我是否需要抓取的 sudo 404 页面，如果有人从损坏的链接加载实际的 404 页面，它会正确呈现吗？

该组件位于我的 Switch 组的底部，为：Route component={Page404}

正确的页面渲染：https ://dangerhuskie.com/works/varsity-pumpkinhead

查看损坏的 404：https ://dangerhuskie.com/farts

如果您从 404 转到另一个页面，然后浏览器返回按钮返回它，它会正确呈现。

当我为我的 React 应用程序进行生产构建时，会出现此错误。发生这种情况是因为我有一个脚本可以检测浏览器的语言并将用户重定向到使用他们的语言的网站版本。

这是有问题的代码（在 App.js 中）：

如果我理解正确，问题是 react-snap 在抓取页面时，这段代码有问题。

如果您想知道为什么我使用它window.location.pathname而不是history.replace()它是因为其他一些原因，现在不值得解释。

react-snap通过添加额外的“/”来更改路径。例如，当我尝试转到“/en”时，它会重定向到“/en/”。因此页面显示 ErrorScreen（未找到）。我无法访问我的路径（'/en'、'/en/about'、'/de'、'/de/uberuns'）。如果我通过添加“/”来更改我的所有路线。例如，从“/en/about”到“/en/about/”。我可以访问我的页面，但我希望我的路径“/en/about”不像“/en/about/”那样。我不想要额外的'/'。