使用 PHP 进行 React.js 服务器端渲染

Posted

技术标签:

【中文标题】使用 PHP 进行 React.js 服务器端渲染【英文标题】:React.js server side rendering with PHP 【发布时间】:2016-04-06 23:58:05 【问题描述】:

我想基于ReactWordPress 开发主题/插件。为了使它对搜索引擎友好,我需要它最初在服务器上呈现(服务器端呈现)。

据我所知,唯一的方法是使用react-php-v8js,这需要PECL V8js extension。这是一个问题,因为我无法控制运行这些主题/插件的平台。

有没有办法让ReactWordPress 一起工作而无需安装额外的扩展?也许通过将React 文件构建/编译到PHP 中?

【问题讨论】:

您能否澄清“我无法控制平台”的意思?我假设您的意思是您无权在服务器上安装 V8js 或 Nodejs 之类的东西,对吗?有一些我熟悉的解决方案,但它们涉及安装一个或另一个。 没错——我无法安装任何 PHP 扩展(例如 v8js)或类似 Node.js 的任何东西。这些 WordPress 插件/主题很可能会在不允许这样做的共享主机平台上运行。 在这种情况下,我能想到的唯一方法是在单独的服务器上设置 nodejs 或 V8,并让您的反应代码调用它来完成服务器端渲染。您可能需要处理一些 CORS 问题,但理论上我不明白为什么这不起作用(请注意,我自己实际上并没有尝试过)。 【参考方案1】:

有一篇文章描述了如何做到这一点:

https://sebastiandedeyne.com/server-side-rendering-javascript-from-php/

但这是一个相当复杂的设置,并且需要使用 composer。这在 Wordpress 项目中可能很困难,因为 Wordpress 倾向于完全避开现代 php 架构。

如果您正在寻找帮助 PHP 中的 s-s-r 的库:

https://github.com/spatie/server-side-rendering

祝你好运。

【讨论】:

【参考方案2】:

如果你希望你的内容在没有 js 的情况下被搜索引擎索引,你可以使用 Wordpress 打印你的最小内容,只是最简单的 + 关键元标记,也许本地化一些初始状态以让你的 react 应用程序启动。像http://underscores.me/ 这样的简单主题就足够了。当 js 可用时,您可以用 React 替换整个 WordPress 生成的内容。

理想的做法是让 React 为您生成内容。但是,我们很难看到 nodejs / PECL V8js 扩展无处不在。

【讨论】:

【参考方案3】:

如果你至少可以安装 nodejs 并启动一个 node 进程,那么应该没问题,虽然不是那么简单。

您需要生成资产的 s-s-r 版本并在节点进程中使用它,该进程将侦听套接字以写入 html 结果..

在您的控制器中,您可以为您的节点进程创建一个套接字(类似于 stream_socket_client(...)),然后您可以将一个写为 javascript 字符串的虚拟函数发送到该套接字(类似于 stream_socket_sendto($sock, " getResultForMyWidget(someParams)..."))。该函数将在节点进程中进行评估,该进程会将响应返回给控制器(作为 ReactDOMServer.renderToString 的 html 响应来自您要呈现的组件)。

大局就是这样。

有一个 symfony 插件非常清楚地说明了它(参见this github),并带有一个虚拟服务器节点进程来说明它如何处理套接字侦听和传入函数的 eval 并返回 html 结果。另请参阅沙箱中的示例以获取更大的图景和深度实现。您应该能够使其适应 wordpress。

【讨论】:

以上是关于使用 PHP 进行 React.js 服务器端渲染的主要内容,如果未能解决你的问题,请参考以下文章

react.js在服务器端渲染有啥好处?渲染是怎么个流程

基于 React.js 和 Node.js 的SSR实现方案

React 使用服务器端渲染还是客户端渲染?

react.js在服务器端渲染有啥好处?渲染是怎么个流程

React 服务器渲染原理解析与实践

React 服务器渲染原理解析与实践