React 同构应用程序中的状态会发生什么答案

【问题标题】：What happens with the state in a React isomorphic AppReact 同构应用程序中的状态会发生什么
【发布时间】：2017-01-17 22:40:03
【问题描述】：

我正在使用 React 构建一个同构应用程序，它必须支持没有 JS 的用户。

我是这项技术的新手，我有一个基本的疑问：服务器可以存储组件状态来模拟 React 在客户端的作用？

我想象当用户没有 JS 时这个流程：

对吗？

【问题讨论】：

本质上，在您的情况下，React 将仅在服务器上运行以生成静态 HTML 页面——这与使用 PHP 渲染 HTML 相当：服务器将页面放在一起，然后将其投掷对客户，开火然后忘记。您将使用<a> 元素在静态页面之间导航。 “真正的”同构 React 应用程序所做的是它们只预渲染一个静态页面一次，然后注入预渲染的标记以提供动态的客户端行为。您可以在调用之间保持应用状态是正确的，但这需要某种会话管理。

【解决方案1】：

假设您使用的是 react-router ：

服务器旨在初始化您的状态，为其提供在获取 url 时使您的应用程序正常工作所需的默认最小值。

例如，如果您有一个应用程序要在其中显示用户列表，例如在 /users URL 上，当您发送您的第一个请求时，服务器将存储用户处于反应状态。

首次加载之后，您将使用 react-router 在客户端工作，并发出 XHR 请求。

但是，如果您刷新页面，该过程将重新开始：首先加载初始化状态，然后是客户端导航。

编辑：解释 =>

当您想在服务器上使用 react 时，这意味着您使用的是 Nodejs 服务器。事实上，react-dom 提供了一个名为 renderToString 的方法，可以将 react jsx 组件转换为标准 HTML。

这旨在更快地加载第一个调用

为什么？

当您在客户端加载“大”JS 应用程序时，您有一些延迟时间，即您的浏览器需要下载您的 JS 包的时间。

服务器端渲染旨在避免这种行为，或者至少给人一种应用启动速度更快的感觉。

在任何情况下，您都不能只使用 react，即使您使用服务器端渲染也是如此。 为什么？。因为您在按钮上的事件，或客户端上的异步加载，或按键都是 JS 语言。

【讨论】：

感谢您的回复！但是如果客户端没有 JS 怎么办？
没有javascript就不能使用react
@Margin 实际上，我的理解是您可以在服务器端呈现 HTML 页面，就像使用 PHP 一样。不是这样吗？
我将编辑我的答案以帮助您更好地理解
@SebastiánDelleDonne -- 您将需要一种方法来区分 服务器上的客户端，以及 rebuild 或 obtain 与该客户端关联的状态。当然，您可以将应用程序状态保存在一个对象中的服务器上，但是您如何确定 它适用于哪个客户端？您有多个客户端影响同一个对象。这个问题，根据哪个客户端发出请求来确定服务器状态，经典地称为会话管理，我确信它已经在 NodeJS 上以几十种方式实现。