关键词：
【中文标题】什么是 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。
【讨论】：
如何避免在 ReactJS 同构应用程序中的服务器上出现错误“未定义本地存储”？
】如何避免在ReactJS同构应用程序中的服务器上出现错误“未定义本地存储”？【英文标题】：Howtoavoidgettingerror\'localStorageisnotdefined\'onserverinReactJSisomorphicapp?【发布时间】：2020-03-1020:02:12【问题描述】：我在我的webApp中使用localSto... 查看详情
如何避免在 ReactJS 同构应用程序中的服务器上出现错误“未定义本地存储”？
】如何避免在ReactJS同构应用程序中的服务器上出现错误“未定义本地存储”？【英文标题】：Howtoavoidgettingerror\'localStorageisnotdefined\'onserverinReactJSisomorphicapp?【发布时间】：2016-02-1621:40:27【问题描述】：我在我的webApp中使用localSto... 查看详情
Reactjs - 路线中的“组件”与“渲染”
】Reactjs-路线中的“组件”与“渲染”【英文标题】：Reactjs-`component`vs`render`inRoute【发布时间】：2018-12-1600:35:01【问题描述】：我对@987654322@(v4.3.1)中Route的用法有两个疑问：我们什么时候在Route中使用component和render：<Routeex... 查看详情
ReactJS 使用 props 条件渲染组件的最佳方式
】ReactJS使用props条件渲染组件的最佳方式【英文标题】：ReactJSBestwaytoconditionalrenderingcomponentwithprops【发布时间】：2018-03-1808:12:15【问题描述】：现在我的容器看起来像这样。但我认为这不是最好的方法。renderAddForm()if(!this.props.isF... 查看详情
reactjs入门基础
渲染这俩字可能在很多地方都见过。但可能不太理解是啥意思。那么首先我们来理解一下渲染。渲染我觉得这样理解比较通俗。我们做一个汽车，开始是没有喷漆的（没有css）只是些框框架架（HTML标签）。那么网页加载就是首... 查看详情
在同构 reactjs 中检测移动设备
】在同构reactjs中检测移动设备【英文标题】：Detectingmobileinanisomorphicreactjs【发布时间】：2016-05-0512:03:00【问题描述】：我应该如何在我的reactjs+express中实现检测手机？我使用mobile-detect来确定是否移动，但首先我使用constmd=newMobil... 查看详情
vue服务端渲染同构渲染(代码片段)
...等JS框架的崛起，开始转向了前端渲染。2014年起又兴起了同构渲染，号称是未来，集成了前后端渲染的优点，当真如此？我们先明确 查看详情
reactJS：具有通量的同构应用程序
】reactJS：具有通量的同构应用程序【英文标题】：reactJS:isomorphicappwithflux【发布时间】：2015-11-0902:07:25【问题描述】：React-flux-cart。此示例仅包含react的客户端代码。如何使其同构。哪些地方需要更改以包含节点并使其在服务器... 查看详情
reactjs中的render和class里面的函数
】reactjs中的render和class里面的函数【英文标题】：Functioninsiderenderandclassinreactjs【发布时间】：2017-07-2711:37:03【问题描述】：我正在尝试学习reactjs，但我有一些不确定性。我在参考reactDOCS和其他一些教程，我看到函数是在渲染函... 查看详情
react前后端如何同构，防止重复渲染
...个概念解决服务端渲染完成后浏览器端重复渲染的问题。什么叫前后端同构？为了解决某些问题（比如SEO、提升渲染速度等）react提供了2个方法在服务端生成一个HTML文本格式的字符串。在得到了这个HTML格式的字符串之后，通常... 查看详情
条件渲染在 reactjs 中的作用不统一？
】条件渲染在reactjs中的作用不统一？【英文标题】：conditionalrenderingnotactinguniformlyinreactjs?【发布时间】：2021-01-0708:57:28【问题描述】：我过去曾使用过条件渲染，但由于某种原因，它在此处处理一个元素而不是另一个元素，尽... 查看详情
ReactJS：使用枚举的条件渲染
】ReactJS：使用枚举的条件渲染【英文标题】：ReactJS:ConditionalRenderingusingEnums【发布时间】：2018-10-1902:34:43【问题描述】：我对React有点陌生，一直在练习使用thisarticle中指定的枚举渲染方法创建应用程序。但是，我正在尝试以与... 查看详情
如何使 reactjs/flux/react-router spa 同构？
】如何使reactjs/flux/react-routerspa同构？【英文标题】：Howtomakereactjs/flux/react-routerspaisomorphic?【发布时间】：2015-10-1010:07:51【问题描述】：我用reactjs、flux（没有第三方实现）和react-router开发了spa。我现在如何使它同构？用于SEO和更... 查看详情
ReactJs 上的无限循环渲染组件
】ReactJs上的无限循环渲染组件【英文标题】：EndlesslooprenderingcomponentonReactJs【发布时间】：2016-02-2900:35:02【问题描述】：我正面临一个无限循环问题，我看不到是什么触发了它。它似乎在渲染组件时发生。我有三个组件，组织如... 查看详情
将对象存储在状态时渲染中的ReactJS Fetch Type错误
】将对象存储在状态时渲染中的ReactJSFetchType错误【英文标题】：ReactJSFetchTypeerrorinrenderwhenstoringanobjectinstate【发布时间】：2017-10-2508:45:42【问题描述】：我对反应很陌生，我正在尝试从服务器获取对象（会话）并使用表单对其进... 查看详情
如何渲染存储在 redux reducer 中的 reactjs 组件？
】如何渲染存储在reduxreducer中的reactjs组件？【英文标题】：Howtorenderareactjscomponentstoredinareduxreducer?【发布时间】：2016-04-2207:55:54【问题描述】：我有一个加载了几个reactjs组件的reduxreducer。我想通过this.props将这些加载到其他组件... 查看详情
浅谈react前后端同构防止重复渲染
作者：随风溜达的向日葵 什么叫前后端同构？为了解决某些问题（比如SEO、提升渲染速度等）react提供了2个方法在服务端生成一个HTML文本格式的字符串。在得到了这个HTML格式的字符串之后，通常会将其组装成一个页面直接... 查看详情
reactJs 中的 .map() 没有返回任何内容
】reactJs中的.map()没有返回任何内容【英文标题】：.map()inreactJsisnotreturninganything【发布时间】：2021-10-0200:23:57【问题描述】：我是新手，我正在尝试从外部SidebarData.js文件（在同一根/components/..）中添加渲染项目列表我不确定为什... 查看详情