什么是 ReactJS 中的同构渲染方式

Posted 2023-02-22

【中文标题】什么是 ReactJS 中的同构渲染方式

【英文标题】：What is Isomorphic way of Rendering in ReactJS

【发布时间】：2019-05-10 10:11:01

【问题描述】：

Javascript 框架不是“搜索引擎友好”的。搜索引擎在动态加载数据时遇到问题，最终框架会创建标记。

这个问题在 React 中以一种同构的渲染方式得到了解决。这个概念实际上是什么？它与 Angular 有何不同？

附： ReactJS 的新手。如果有更多概念化的解释，将不胜感激。

【问题讨论】：

与 Angular 的主要区别在于 React s-s-r 当前是同步的。组件中的任何异步代码都不会被渲染。您需要设计一个应用程序来与数据同步水合，而不是使用同构fetch。

@AlirezaNoorali 尽可能发布链接。会有帮助的。

React can be used on server side rendering. What does that mean?的可能重复

【参考方案1】：

默认情况下，SPA 框架没有很好的 SEO，因为 DATA 是在使用 AJAX 加载页面之后出现的。这意味着如果您在所有页面标题中看到页面“ctrl+U”的来源是相等的，这对 SEO 不利。

看到这个做反应 s-s-r (server-side-rendering)。获取 s-s-r 数据并构建页面的 Dom。

如果你不想使用纯方式，可以使用nextJs。

例如看我的 react s-s-r 项目：malltina.com

【讨论】：

这也很有用：medium.com/@justinjung04/…

NextJS?那是什么？@MohammedEbrahimiAval，你的意思是说，我们在 ReactJS 中没有 AJAX 调用？

@AshfaqueRifaye NextJs 是像 create-react-app 这样的工具，但是这个工具的基础是 s-s-r，而你不能用 create-react-app 做 s-s-r，你必须弹出它。

@AshfaqueRifaye 同构意味着一个代码在 2 侧呈现，并且意味着在第一次（第一个请求）第一页在服务器中呈现，并且在其他请求数据从 AJAX 和这一次就像正常反应一样。

@AshfaqueRifaye 您可以使用 react lib 并在没有任何工具的情况下执行 s-s-r（纯方法），但这并不容易！但是您可以使用 NextJs 工具来更快地开发。请参阅我的第一条评论以获得纯粹的方式。

【参考方案2】：

ReactJS 只是 javascript，可以在浏览器中运行，也可以在服务器中运行。例如，http 请求后的 nodejs 服务器可以运行 react 生成 html 标记，然后将该标记发送到浏览器。这称为反应服务器端渲染，但也有人称其为通用反应。

有关于此的在线教程/课程。您可以搜索有关反应服务器端渲染的信息。 我个人会推荐这节课 https://www.udemy.com/server-side-rendering-with-react-and-redux/ 以了解它是如何工作的

也因为s-s-r不容易，你可以理解它是如何工作的，但之后我会推荐使用nextjs。