在PHP应用程序中显示服务器端呈现的reactJS组件 [英] Displaying a server side rendered reactJS component within a PHP application

问题描述

我以前在另一个项目上使用reactJS。
当构建所述项目时，我注意到了一个崩溃，即与JS渲染组件相关的SEO利益的损失。

I have previously used reactJS on another project. When building said project i noticed a downfall namely the loss of SEO benefit associated with JS rendered components.

我正在重建一个旧项目，我想用ReactJS替换一些Javascript。

I am rebuilding an old project and I would like to replace some of the Javascript with ReactJS.

例如，一个多步骤形式 - 我想用一个有状态的组件来替换它，根据需要显示正确的阶段。

For example, a multi step form - I'd like to replace it with a stateful component that displays the correct stage as required.

我希望通过第一步的操作保持页面的SEO方面。

I would however like to maintain the SEO aspects of the page by having the first step spiderable.

实现这个我的研究暗示我应该使用React的 React.renderComponentToString

To achieve this my research implies that I should be using React's React.renderComponentToString

研究了我的思想过程我应该使用node.js渲染组件服务器端，然后在浏览器中提供它们。然后重新添加组件以添加客户端功能。我的第一个问题是，这是否是一个合适的方法？有没有更简单的方法，我已经忽略了？

Having researched the issue my thought process is that I should render the components server side using node.js and then serve them up within the browser. The component is then re-added per say to add the client side functionality. My first question is as to whether this is a suitable approach? Is there a much simpler approach that I have overlooked?

Pete Hunt在这里提到（ https://groups.google.com/forum/#!msg/reactjs/eUespJPdyas/hmJywyo9ZSwJ ），Instagram使用/使用Django和设置类似于我想象的。

Pete Hunt mentions here (https://groups.google.com/forum/#!msg/reactjs/eUespJPdyas/hmJywyo9ZSwJ) that Instagram uses/used Django and had a setup similar to what I imagined.

我的应用程序使用phalcon写成php。我的问题本质上与这个语句有关：

My app is written in php using phalcon. My question essentially relates to this statement:

Node将返回构成组件的HTML。 Django
使用HTML，并通过普通的Django
模板将其插入到DOM中。

Node will then return the HTML that makes up the component. Django takes that HTML and inserts it into the DOM via normal Django templates.

关于在PHP中这样做？我不希望这个组件呈现在幕后，并在请求时使用，而是在需要时通过传递的参数来呈现。

How do I go about doing this within PHP? I don't want this component rendered behind the scenes and used when requested, but rather rendered when required by PHP with passed parameters.

我发现这个问题=http://stackoverflow.com/questions/10048978/sending-messages-from-php-to-node-js>从PHP发送消息到Node.js ），这让我想到一种方法是只需使用CURL查询我的节点实例正在侦听的端口，以获取我然后输出的html。

I found this question (Sending messages from PHP to Node.js) which got me thinking that one approach is to simply use CURL to query the port my node instance is listening on to get the html which I then output.

我关心的是，我所有的CURL经验建议它是非常缓慢。我不希望我的网页加载时间大大减少，只是为了获得一些SEO的好处。

My concern here is that all my experiences with CURL have suggested that it is very slow. I don't want my page load times to decrease dramatically just to get some SEO benefit.

任何人都可以提出上述问题/我的方向？

Could anyone advise on the above questions/my direction?

很感谢

推荐答案

Stoyan Stefanov创建了一个调用V8 JS库的库PHP代码做这样的事情;可在此处获取：

Stoyan Stefanov created a library for calling into the V8 JS library from PHP code for doing this sort of thing; it's available here:

https：// github.com/reactjs/react-php-v8js

您可以阅读他在这两个帖子中如何设置React服务器渲染：

You can read about how he set up React server rendering in these two posts:

http：//www.phpied .com / server-side-react-with-php /

http://www.phpied.com/server-side-react-with-php-part-2/

呈现不会是即时的，但它应该是相当快。如果您遇到性能问题并且缓存无效，您可以考虑使用Google的AJAX抓取功能，以便仅针对Googlebot而不是正常请求使用服务器呈现：

Rendering won't be instant, but it should be reasonably fast. If you're having performance problems and caching doesn't help, you can consider using Google's AJAX crawling feature in order to use server rendering only for Googlebot but not normal requests:

https://developers.google.com/webmasters/ajax-crawling/ docs / get-started

请注意，浏览器还会利用服务器呈现的标记，即使初始请求较慢，呈现也可能更快。

Note that browsers will also take advantage of server-rendered markup so even if the initial request is slower, rendering may be faster.

这篇关于在PHP应用程序中显示服务器端呈现的reactJS组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！