问题标签 [react-ssr]

我正在尝试让 google adsense 与我的应用程序一起使用。我有一个 react SSR 应用程序，所以我正在尝试实现 react-ssr-adsense 包。要实施的代码更改包括安装软件包、使用如下所示的脚本标记更新 ssr 模板的 head 部分，然后添加下面的 Adsense 代码。Adsense 组件已添加到我要呈现广告的页面上主要组件下方的 div 中。

当我运行应用程序并点击 Adsense 组件时，我收到以下错误：

无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 你可能在同一个应用程序中拥有多个 React 副本

由于我的代码更改很简单，我假设我的问题是 1 或 3。我通过运行 npm 命令“npm outdated”和“npm ls react-dom”进行了一些分析。这表明我有两个过时的包和两个版本的 react。第二个反应版本 17.0.2 是由于安装了 react-ssr-adsense。

然后我更新了我的所有包，删除了我的节点模块目录，然后运行 ​​npm install 来刷新所有包。然后我重新运行“npm outdated”，可以看到我所有的包都与“Wanted”包内联。在我的 package.json 文件中，反应版本是 17.0.2。当我运行“npm ls react-dom”时，我收到以下消息：

PS C:\Users\jterr\Documents\NodeProjects\TeachLearnGame> npm ls react-dom
tealearngame@2.0.0 C:\Users\jterr\Documents\NodeProjects\TeachLearnGame

+-- 未满足的对等依赖 react-dom@17.0.2

`-- react-ssr-adsense@1.0.1

`-- react-dom@17.0.2

npm 错误！peer dep 缺失：react-dom@^16.8.0，@material-ui/icons@4.9.1 需要

npm 错误！peer dep 缺失：react-dom@^16.3.0，material-auto-rotating-carousel@3.0.2 需要

npm 错误！缺少对等部门：react-dom@^15.0.0 || ^16.0.0，react-hot-loader@4.12.20 需要

我不知道如何解释这个回复。感谢任何关于我需要做些什么来协调和让组件工作的建议。我需要做些什么来解决这些错误以及我在尝试呈现 Adsense 代码时遇到的“Invalid Hooks”错误？后一种要求更为迫切。

这是 npm outdated 命令的输出 Package Current Wanted Latest Location @babel/core 7.9.0 7.9.0 7.15.8teacherlearngame

@babel/preset-env 7.9.0 7.9.0 7.15.8 教学游戏

@babel/preset-react 7.9.4 7.9.4 7.14.5 教学游戏

@hot-loader/react-dom 16.13.0 16.13.0 17.0.1 教学游戏

@material-ui/icons 4.9.1 4.9.1 4.11.2 教学游戏

babel-loader 8.1.0 8.1.0 8.2.2 教学游戏

express-jwt 5.3.1 5.3.1 6.1.0 教学游戏

文件加载器 6.0.0 6.0.0 6.2.0 教学游戏

头盔 3.22.0 3.22.0 4.6.0 教学游戏

lodash 4.17.15 4.17.15 4.17.21 教学游戏

猫鼬 5.13.11 5.13.11 6.0.11 教学游戏

nodemon 2.0.2 2.0.2 2.0.13 教学游戏

反应热加载器 4.12.20 4.12.20 4.13.0 教学游戏

反应可调整大小 1.11.1 1.11.1 3.0.4 教学游戏

反应路由器 5.1.2 5.1.2 5.2.1 教学游戏

反应路由器 dom 5.1.2 5.1.2 5.3.0 教学游戏

react-swipeable-views 0.13.9 0.13.9 0.14.0 教学游戏

webpack 4.46.0 4.46.0 5.58.2 教学游戏

webpack-cli 3.3.11 3.3.11 4.9.0 教学游戏

webpack-dev-middleware 3.7.3 3.7.3 5.2.1 教学游戏

webpack-node-externals 1.7.2 1.7.2 3.0.0 教学游戏

我有一个使用 Helmet 设置正确 HTML 标签的 React 项目。但是，因为我不支持服务器端渲染，新的 HTML 标记在 Facebook 和 Twitter 预览卡中不起作用。然而，据我所知，Grubhub.com 使用 React 并且不使用服务器端渲染，但他们能够支持 Facebook 和 Twitter 上的预览卡。谁能解释这怎么可能？

我在服务器上的 rails 中使用 kramdown 和 katex 将 DB 中的评论、文章等中的数学和 markdown 预处理为 HTML。但是，我希望生成的一些元素充当反应组件（例如，用反应路由器链接替换一些标签等）..

根据 React.renderToString() 的描述，听起来我可以注释我生成的 HTML 以具有适当的属性，然后使用 hydrate 将它们变成完整的反应节点。

这可能吗？如果是这样，我在哪里可以找到我需要添加哪些属性以将标准 HTML 标记转换为可水合反应组件的参考？

或者我会以完全错误的方式解决这个问题？

我有一台 linux 机器，在这三个实例上运行

• 主站点（反应）
• 后端 api 服务器（节点）
• 仪表板（反应）

这台机器有 nginx 服务器，它启用了 SSL，所有请求都是 https。

现在的情况是当我点击域名然后主站点加载调用 api 并呈现数据（工作正常）

现在第二种情况是当我点击仪表板站点（域/dashbaord）然后站点打开但该站点无法呈现数据时。（不工作）

两个站点都启用了 SSR，因此仪表板站点服务器端渲染发生并获取数据，但客户端无法通过仪表板位置调用块。

在网络选项卡上，当我看到加载的块时，它显示 304（指向域/静态/js/endpoint.js），这是错误的。这里应该像 (domain/dashboard/static/js/endpoint.js) 一样调用它。

我不知道为什么会这样。我在路由器上添加了路径，即 path='/dashboard'

我在我的 nginx 服务器上所做的是：

我认为如果 nginx 配置发生任何问题，那么主站点将无法工作，甚至仪表板站点 ui 和服务器端数据获取也不会发生。

需要从一些专家那里知道我在哪里做错了，我必须关注哪里。提前感谢您的互动和支持。

我正在后端使用 react-rails （尽管使用单个“应用程序”组件）编写一个反应应用程序，并且我希望能够启用 SSR。但是，当我加载许多页面时，我使用 fetch 对服务器上返回 json 数据的操作发出多个请求（例如，我可能加载文章列表、用户数据并查找 slug）。

我显然不想重写我的控制器中产生这些数据的所有动作。是否有一些解决方案可以让我在 execjs 中进行 SSR 渲染时执行这些操作？换句话说，如何在 SSR 期间从我的 rails 后端返回我的 javascript 代码请求的数据，这样我就不必等到客户端执行来提供显示页面所需的初始数据？

我猜这是一个已解决的问题，但一直无法找到一个好的答案。