问题标签 [react-ssr]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 即使从一开始就加载了最大的内容，最大的内容绘制时间也确实很慢
我正在使用带有样式组件的 react ssr，谷歌速度测试表明最大的内容加载速度非常慢。
第一次绘制时间大约需要 1.1 秒，我网站的最大内容是图像英雄，它说大约需要 12 秒。但是，绘制时间线几乎从一开始就显示图像。
下图来自开发工具性能选项卡。
如您所见，图像一直存在。当我运行性能测试时，图像有时会变为空白，但图像会在第一次绘制之前显示。
您是否从性能结果中看到任何异常？
reactjs - 启动 reactjs 应用程序时找不到 gifsicle 二进制文件
我们在 package.json 中使用 gifsicle 版本 5.1.0，但是应用程序启动会抛出以下错误。它期望在 node_modules/gifsicle/vendor 文件夹下有一个二进制 gifsicle，但尝试使用“yarn dev”启动应用程序不起作用。任何指针都会有所帮助
错误似乎如下
reactjs - 启动客户端时 React SSR 闪烁
简化我的帖子：
我的 ssr 网页在启动客户端时闪烁，这意味着页面呈现服务器端呈现的 html，然后变为空白，然后重新开始加载所有内容。
浏览细节：
我正在做一个反应项目，我们决定将其从在客户端呈现更改为在服务器中呈现。该项目包括react-router-dom,redux和react-redux,material-ui附带react-jss,loadable/component也处理 head 元素react-helmet-async, 并且在 ssr 中使用express.js这似乎是必须的。
- 因为
react-router-dom我做了文档上的所有事情。BrowserRouter在客户端和StaticRouterssr 中使用并将context对象传递给它。 - 对于
redux并且react-redux我保存preloaded_state在窗口中的一个变量中并在客户端获取它然后将其传递给存储。还获取了一些外部数据以获取页面源上的内容。所以我在 ssr 中有一些请求和数据获取。 - 因为
material-ui我创建了一个new serverSideStyleSheet并收集了整个项目的所有样式。 - 因为
react-helmet-async我Helmet为每个页面设置了不同的标签，这些标签收集了不同的标题、描述和......个性化。还有一个helmetProvidercsr 和 ssr 的包装器。 - 起初我使用
react-helmet但它与renderToNodeStream.i 不兼容。我没有更改 react-helmet-async 虽然我没有使用 renderToNodeStream 但renderToNodeStream希望它能够迁移到某一天。 - 关于
express.js我按照文档所说的那样使用它，但是在我添加之后，我loadable/component无法通过添加 . 所以app.get('*' , ServerSideRender)我必须添加我想在服务器中呈现的每个 urlapp.get(url ,ServerSideRender)。 - 关于该项目的另一件事是我没有弹出并使用 create-react-app 创建它并且没有 webpack 配置或 babelrc 但我使用的是 craco.config.js
- 最后一件事是我已经从 ssr 中排除了 index.html，而是我自己在 SSR.js 文件中制作了标签，因此 index.html 仅在客户端中呈现。我非常小心地在 ssr 中编写标签，就像它们在 index.html 中一样
解决方案但不是解决方案：
出现这个问题是因为我在我的Router.js. 所以当我以正常方式导入组件时，没有闪烁，一切都很好，但未使用的 js 会降低我页面的性能分数。我需要可加载组件停止使页面闪烁。
潜入代码：
只是客户
index.html ：仅在客户端呈现
index.js ：仅在客户端呈现
只是服务器
ssrIndex.js
SSR.js
对于客户端和服务器
应用程序.js
当我说谢谢你的时间时，我是认真的。我很乐意听到任何建议或解决方案。
reactjs - 无法获取有关反应 js SSR 的 json-ld 信息
我们可以在客户端渲染中看到 JsonLd 信息。当我们通过服务器渲染时，由于渲染然后获取数据（通过API），信息不可用。
我们尝试了以下方法，但没有任何效果：
- 在父级中获取数据，将数据传递给子级，然后渲染子级方法
- 如果尚未获取数据，则呈现加载器
- ReactDOM.水合物
渲染函数的 json-ld 数据
我们在这里缺少什么？
javascript - 浏览器如何将反应服务器端渲染中从服务器接收的 HTML 字符串转换为 HTML DOM 元素？
我已经开始学习 React 服务器端渲染。然后我配置“ index.js ”文件如下：
因此，在上面代码的 Statement1 中，我们从“Home”组件返回字符串（因为“renderToString”将 HTML 转换为字符串。
当我检查 DOM 时，我得到以下代码：
所以，我的问题是浏览器如何将 HTML 字符串（作为服务器的响应接收）转换为 DOM 元素，以及如何<body>添加这个“”标签？
node.js - 关于在 node-jsx 和 react-engine 中使用 window 和 document
我想使用.pug和.jsx作为快速视图引擎。
我尝试使用其他模块，例如@react-ssr/express，但它们不起作用。
（看来我的项目是基于几年前最后更新的一个开源项目）
所以，我现在正在使用node-jsxand react-engine，但是这些模块不允许我使用windowand document。
（就像这个截图）
我已经通过谷歌搜索尝试了许多解决方案，如下面的代码。
但是呈现了空白页面。
我认为这些模块只是渲染和运行我的 jsx 文件，而不需要任何转换为 javascript。
有没有办法使用windowanddocument和node-jsxand react-engine？
（或者请向我推荐其他模块）
服务器.js
索引.jsx
reactjs - Next Js 动态 i18n 子文件夹
我目前正在使用 Next.js 中的无头 WordPress 网站。我在国际化路由方面有点挣扎。我有 2 个与此问题相关的主页文件：
在这个文件中，我使用 getStaticPaths 函数为我的 WordPress 数据库中的所有页面获取 GraphQL 数据。
在这个文件中，我使用 getStaticPaths 函数为我的 WordPress 数据库中的所有博客文章获取 GraphQL 数据。
我在 next.config 文件中配置了语言环境，如下所示：
我很难找到一种方法来捕捉所有的博客文章。使用我当前的文件结构，我将捕获所有带有以下 URL 的博客文章：
但不是具有以下结构的默认语言下的博客文章：
我尝试使用 [[locale]] 但收到错误：
因此，似乎只能将包罗万象的路线设为可选。知道如何处理这样的事情吗？另一种方法可能是“加入”帖子和博客帖子的 2 个不同文件，然后在我需要对帖子或页面进行查询时使用一些条件逻辑进行排序。如果可能的话，我宁愿避免这种情况......
reactjs - 使用 redux 和 webpack 反应 SSR 优化后 Gtmetrix 分数不会增加
下面是 webpack 生产文件
服务器.js
当我使用 pagespeed 检查分数时，它在桌面上显示为 81%，但当我检查 gtmetrix 分数时，分数为 38%。
该项目使用 React、redux、webpack 4 和 express。并按照https://github.com/william-woodhead/simple-universal-react-redux repo 和https://redux.js.org/usage/server-rendering进行服务器端渲染和实现。
我们如何在 react-redux ssr 项目中提高分数？
reactjs - React SSR 评估服务器页面上元素的大小
我需要创建一个应用程序来呈现 HTML 文件，稍后我需要通过电子邮件发送或转换为 pdf 文件。问题是页面上的标记有点复杂，我需要创建将内容连接到信息气泡的高亮和线条。我看不到如何用纯 CSS 和 HTML 渲染它，所以我想知道有没有办法在节点 js 服务器上模拟浏览器并在服务器上水合渲染的 html。
reactjs - 如何使 Google Auto Ads 与 React SSR 应用程序一起使用
我想在我的 react 应用程序中使用 Google Adsense 自动广告。React 应用程序使用 SSR，我已将 Google 提供给我的代码添加到模板的 head 部分，如下所示。
在现场，我使用 Chrome 工具检查了 html 代码。我可以在代码中看到这一行，但不幸的是，Google Adsense 审查拒绝了我，说我需要修复一些问题。
来自 Google 的指定问题的消息是：我们在您的网站上找不到代码。这是因为代码丢失或不完整，或者您网站的 URL 不正确。学到更多。
我已经删除了登录的要求，这是一个较早的问题，并且我有一个正确的谷歌帐户。
我确实看到了另一个 Stack Overflow 问题，其中指出 window.adsbygoogle 将与 React 一起使用，但似乎问题更多地涉及指定广告单元，并且 window.adsbygoogle 的实现位于组件类中。当我使用自动广告时，我不希望这会适用，但也许我错了。如果是这样，我将如何更改代码？
无论如何，如果任何有初步接受 Google 自动广告经验的人都可以提供帮助，我们将不胜感激。如果您提供代码，请感谢您是否可以使用功能组件，因为我不太喜欢类组件，并且大多数示例似乎都在使用 componentDidMount。
链接到我的网站：https ://tlgamer.herokuapp.com/