问题标签 [react-ssr]

我已经开始研究反应服务器端渲染，有一些问题，即如何路由以及我可以为应用程序中的所有页面实现服务器端渲染，请提供任何有关 reactjs 中服务器端渲染的示例，谢谢

有一个网站，前面是ReactJS写的。为了CEO的正确操作，使用了SSR。算法是这样的：

1 页加载

1. 浏览器打开/foo；
2. SSR 检查是否在缓存中 /foo 没有找到它；
3. SSR 在服务器上渲染并根据 request / foo 执行 react 应用程序；
4. SSR 放入缓存 HTML，结果是渲染过程 / foo 的结果；
5. SSR 给浏览器一个 HTMLL，它是渲染过程 / foo 的结果；
6. 浏览器执行异步请求，这些请求是 HTML，是 /foo 渲染的结果（CSS、JS、favicon ...）；
7. 加载的应用程序反应“理解页面已经被绘制并且没有必要执行路由等”；
8. react 处理用户的进一步操作（如在常规 SPA 中）。

后续更新

1. 浏览器打开/foo；
2. SSR 检查是否在缓存中 /foo 没有找到它；
3. SSR 在服务器上渲染并根据 request / foo 执行 react 应用程序；
4. SSR 放入缓存 HTML，结果是渲染过程 / foo 的结果；
5. 给浏览器一个 HTMLL，它是渲染过程 / foo 的结果；
6. 浏览器执行异步请求，这些请求是 HTML，是 /foo 渲染的结果（CSS、JS、favicon ...）；
7. 加载的应用程序反应“理解页面已经被绘制并且没有必要执行路由等”；

react 处理用户的进一步操作（如在常规 SPA 中）。问题就在前面，每次刷新页面，都会启动路由，重新绘制整个应用程序，从而出现“闪烁”，即第7点不起作用。

问题：是否可以在某个时刻停止此渲染？告诉路线现在不需要绘制它。也许有任何流行的解决方案？

我正在使用下面的标签在 html 中添加 js 块

在正文标签的末尾

正在从 UI 脚本再次加载相同的块。

我正在使用 v5.4.0 的 react-loadable。

有没有人见过同样的行为？

所以，我们的团队正在开发一个 Gatsby 网站，它对我们大多数人来说都能正常工作。然而，一位开发人员需要gatsby clean在几乎每一个代码更改上运行。

不管是错误、更改文本值还是添加标记。

我意识到这是一个相当模糊的问题，但我不确定从哪里开始解决这个问题。

有没有人遇到过这个？

我的应用程序有一个简单的 ssr 路由，下面是我的代码

索引.tsx

应用程序.tsx

服务器/server.js

服务器/index.js

当我运行node server/index.js时，它会启动服务器，这很好。但是当我在浏览器上启动http://localhost:8000/时，它给了我以下错误

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。在 ReactDOMServerRenderer.render ...

PS：我是 reactjs 新手

我正在构建一个具有该SSR功能的反应应用程序，我正在使用React.Suspense客户端进行代码拆分，我收到了这个警告。

App.js我在客户端有我的文件： -

我也有App.js服务器端的文件，但我没有React.Suspense在那里使用，因为服务器不支持它。该文件如下所示：

我的应用程序在服务器上完美呈现，但在客户端，我得到了Warning，当我删除Suspense客户端App.js文件时，一切正常。

谁能帮我解决这个问题？

我正在使用带有节点的反应服务器端渲染来生成pdf。

我有 3 个文件

index.js、PDF.jsx、helper.jsx

index.js 包含以下代码。

PDF.jsx 包含以下导入

Helper.jsx 包含以下代码

但它给出了以下错误

我正在构建一个反应应用程序，我在客户端上为bundle. 我的应用程序在我使用时在服务器上正确呈现SSR，我在服务器上没有代码拆分，但在客户端我有。我在客户端上收到以下警告hydrate。

我@loadable/component用于客户端上的代码拆分

我在客户端有我的 App.js 文件：-

我在客户端上有我的index.js文件：

如何通过code-splitting仅在客户端上使用来修复该警告。我也尝试过React.lazy，React.Suspense但我遇到了同样的错误。

我在加载 AdSense 广告时遇到了一点问题。该站点基于 asp.net，我通常使用 @Html.React("组件名称") 在服务器端呈现反应组件，然后如果需要，我使用 fetch 调用更新组件，因此本质上是混合解决方案。

不幸的是，在 AdSense 的情况下，我收到了这个错误：

据我了解，它抱怨服务器呈现的标记已在客户端发生更改，这显然是由于 AdSense 在浏览器中加载页面后加载广告所致。结果，在 Chrome 中我看不到广告，但它确实设法在 Firefox 上加载它们：/

不幸的是，我不确定如何修复它......我怎样才能知道这个组件可以在客户端更改？

这是组件代码：

我完全明白有很多类似的问题——我都看过了，但似乎没有一个能解决这个问题。非常感谢任何帮助:)

我目前正在开发一个 next.js 应用程序，到目前为止一切顺利，一切正常，但我的客户想要一个我很难实现的功能。

所以该站点位于 mysite.com 和 mysite.com/cars、mysite.com/vehicles 等路线

现在我的客户想要一个基于访问者国家的动态子路径，例如 mysite.com/us/cars 或 mysite.com/uk/cars 或 mysite.com/ng/cars

我已经在 next.js 10 中尝试了新的 i18n 功能，但似乎它只适用于用户的区域设置（语言）。

有没有办法可以以编程方式执行此操作，或者我应该将其留给 DevOps 部署到子文件夹？