反应客户端和服务器端渲染

Posted 2023-02-22

【中文标题】反应客户端和服务器端渲染

【英文标题】：React both client side and server side rendering

【发布时间】：2017-12-29 21:51:18

【问题描述】：

我正在开发一个反应应用程序。 我的要求是：- 1) 前两页应始终从服务器端呈现。 2) 休息页面应该在客户端渲染。

例如：- http://foo.com 和 http://foo.com/about 我想总是从服务器端渲染。 http://foo.com/FAQ, http://foo.com/contact 我想从客户端渲染。

实现这一目标的正确方法是什么？

【问题讨论】：

你使用的是什么后端？

我使用 express 作为后端

【参考方案1】：

您应该使用ReactDOMServer，特别是renderToString() 方法。

ReactDOMServer.renderToString(element)

渲染一个 React 元素到它的 初始 html。这应该只在服务器上使用。反应意志 返回一个 HTML 字符串。您可以使用此方法在 服务器并在初始请求上发送标记以获取更快的页面 加载并允许搜索引擎抓取您的页面以进行 SEO 目的。

如果你在一个已经有这个的节点上调用 ReactDOM.render() 服务器渲染的标记，React 将保留它并且只附加事件 处理程序，允许您进行非常高效的首次加载 经验。

【讨论】：

我需要在哪里定义路由？如果我使用上述方法，那么第二页将由客户端生成

您需要在一个单独的文件中定义它，这将是您的 expressjs 默认文件，即您的服务器。有关更多信息，请参阅反应路由器文档。如果您使用 Link 导航，则第二页及以后的页面将是客户端。