javascript - ReactJS 服务器端渲染与客户端渲染

标签 javascript node.js client-server reactjs

我刚开始研究 ReactJS,发现它为您提供了两种渲染页面的方式:服务器端和客户端。但是,我不明白如何一起使用它。是两种不同的方式来构建应用程序,还是可以一起使用?

如果我们可以一起使用,该怎么做——我们是否需要在服务器端和客户端复制相同的元素?或者,我们是否可以只在服务器上构建应用程序的静态部分,在客户端构建动态部分,而不与已经预渲染的服务器端建立任何连接?

最佳答案

对于给定的网站/网络应用程序,您可以使用 react client-sideserver-sideboth。 p>

客户端

在这里,您完全在浏览器上运行 ReactJS。这是最简单的设置,包括大多数示例(包括 http://reactjs.org 上的示例)。服务器呈现的初始 HTML 是一个占位符,一旦所有脚本加载,整个 UI 就会在浏览器中呈现。

服务器端

在这里将 ReactJS 视为服务器端模板引擎(如 Jade 、 Handlebars 等)。服务器呈现的 HTML 包含应有的 UI,您无需等待任何脚本加载。您的页面可以被搜索引擎索引(如果不执行任何 javascript)。

由于 UI 是在服务器上呈现的,因此您的任何事件处理程序都不会工作并且没有交互性(您有一个静态页面)。

两者

这里,初始渲染在服务器上。因此,浏览器接收到的 HTML 具有应有的 UI。加载脚本后,将再次重新渲染虚拟 DOM 以设置组件的事件处理程序。

在这里,您需要确保使用与在服务器上渲染相同的 props 重新渲染完全相同的虚拟 DOM(根 ReactJS 组件)。否则,ReactJS 会提示服务器端和客户端的虚拟 DOM 不匹配。

由于 ReactJS 在重新渲染之间区分虚拟 DOM,因此真实 DOM 不会发生变异。只有事件处理程序绑定(bind)到真正的 DOM 元素。

关于javascript - ReactJS 服务器端渲染与客户端渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27290354/

相关文章:

javascript - Dir步行获取各种文件的abs路径数组

node.js如何将字符串插入文件开头但不替换原始文本?

C#\Java 和 Java\C# 对客户端\服务器 - 客户端(套接字)关闭时正常断开连接

javascript - 通过socket从js客户端向py服务器发送数据不起作用

networking - TCP 是在每个数据包上发送 SYN/ACK 还是仅在第一个连接上发送?

javascript - ASP.NET - JavaScript onmouseout 获取原始背景

javascript - 使用javascript展开/隐藏可折叠

javascript - FullCalendar - 月 View 中的第一天 - 事件从前一天开始,忽略 nextDayThreshold

node.js - 哟意味着错误 - 错误 : Command failed:/bin/sh -c cd test7 && npm install

javascript - 观看 './**/*.js' 会导致 CPU 使用率过高