I just have began to study ReactJS and found that it gives you 2 ways to render pages: server-side and client-side. But, I can't understand how to use it together. Is it 2 separate ways to build the application, or can they be used together?
我刚刚开始研究堆js，发现它提供了两种呈现页面的方式:服务器端和客户端。但是，我不明白如何一起使用它。构建应用程序有两种不同的方法，还是可以一起使用?
If we can use it together, how to do it - do we need to duplicate the same elements on the server side and client side? Or, can we just build the static parts of our application on the server, and the dynamic parts on the client side, without any connection to the server side that was already pre-rendered?
如果我们可以一起使用它，如何实现它——我们需要在服务器端和客户端复制相同的元素吗?或者，我们可以只在服务器上构建应用程序的静态部分，在客户端构建动态部分，而不与已经预呈现的服务器端连接吗?
3 个解决方案
#1
77
For a given website / web-application, you can use react either client-side, server-side or both.
对于给定的网站/ web应用程序，您可以使用react客户端、服务器端或两者。
Client-Side
Over here, you are completely running ReactJS on the browser. This is the simplest setup and includes most examples (including the ones on http://reactjs.org). The initial HTML rendered by the server is a placeholder and the entire UI is rendered in the browser once all your scripts load.
在这里，您在浏览器上完全运行了反应物js。这是最简单的设置，包含了大多数示例(包括http://反应物js.org上的示例)。服务器呈现的初始HTML是占位符，在加载所有脚本之后，整个UI将在浏览器中呈现。
Server-Side
Think of ReactJS as a server-side templating engine here (like jade, handlebars, etc...). The HTML rendered by the server contains the UI as it should be and you do not wait for any scripts to load. Your page can be indexed by a search engine (if one does not execute any javascript).
把堆js看作服务器端模板引擎(比如jade、handlebar等)。由服务器呈现的HTML包含UI，您不必等待任何脚本加载。您的页面可以被搜索引擎索引(如果不执行任何javascript)。
Since the UI is rendered on the server, none of your event handlers would work and there's no interactivity (you have a static page).
由于UI是在服务器上呈现的，所以没有任何事件处理程序可以工作，也没有交互性(您有一个静态页面)。
Both
Here, the initial render is on the server. Hence, the HTML received by the browser has the UI as it should be. Once the scripts are loaded, the virtual DOM is re-rendered once again to set up your components' event handlers.
这里，初始呈现在服务器上。因此，浏览器接收到的HTML具有应有的UI。加载脚本之后，将再次重新呈现虚拟DOM，以设置组件的事件处理程序。
Over here, you need to make sure that you re-render the exact same virtual DOM (root ReactJS component) with the same props that you used to render on the server. Otherwise, ReactJS will complain that the server-side and client-side virtual DOMs don't match.
在这里，您需要确保使用在服务器上使用的相同的工具重新呈现相同的虚拟DOM(根反应物js组件)。否则，堆js会抱怨服务器端和客户端虚拟dom不匹配。
Since ReactJS diffs the virtual DOMs between re-renders, the real DOM is not mutated. Only the event handlers are bound to the real DOM elements.
由于堆js在重新呈现之间分散虚拟DOM，所以真实的DOM没有发生突变。只有事件处理程序绑定到真正的DOM元素。
#2
19
Image source: Walmart Labs Engineering Blog
图片来源:沃尔玛实验室工程博客
NB: SSR (Server Side Rendering), CSR (Client Side Rendering).
NB: SSR(服务器端呈现)，CSR(客户端呈现)。
The main difference being that with SSR, the servers response to the clients browser, includes the HTML of the page to be rendered. It is also important to note that although, with SSR, the page renders quicker. The page will not be ready for user interaction until JS files have been downloaded and the browser has executed React.
主要的区别在于，使用SSR时，服务器响应客户机浏览器，包括要呈现的页面的HTML。同样需要注意的是，尽管使用SSR，页面呈现速度更快。在下载了JS文件并执行了response之后，页面才可以进行用户交互。
One downside is that the SSR TTFB (Time to First Byte) can be slightly longer. Understandably so, because the server takes some time creating the HTML document, which in turn increases the servers response size.
一个缺点是SSR TTFB(时间到第一个字节)可能稍微长一些。可以理解，因为服务器需要一些时间来创建HTML文档，这反过来又增加了服务器的响应大小。
#3
1
I was actually wondering the same researching quite a bit and while the answer you are looking for was given in the comments but I feel it should be more prominent hence I'm writing this post (which I will update once I can come up with a better way as I find the solution architecturally at least questionable).
我实际上是想相同的研究不少,你正在寻找的答案是在评论但是我感觉它应该更加突出因此我写这篇文章(我将更新一旦我能想出一个更好的方法,我发现解决方案架构上至少有问题)。
You would need to write your components with both ways in mind thus basically putting if switches everywhere to determine whether you are on the client or the server and then do either as DB query (or whatever appropriate on the server) or a REST call (on the client). Then you would have to write endpoints which generate your data and expose it to the client and there you go.
您需要同时考虑这两种方式来编写组件，从而基本上将if开关放在各处，以确定您是在客户机还是服务器上，然后以DB查询(或服务器上的任何适当的查询)或REST调用(在客户机上)的方式执行。然后必须编写生成数据的端点，并将其公开给客户端。
Again, happy to learn about a cleaner solution.
再次，很高兴了解到一个更干净的解决方案。
#1
77
For a given website / web-application, you can use react either client-side, server-side or both.
对于给定的网站/ web应用程序，您可以使用react客户端、服务器端或两者。
Client-Side
Over here, you are completely running ReactJS on the browser. This is the simplest setup and includes most examples (including the ones on http://reactjs.org). The initial HTML rendered by the server is a placeholder and the entire UI is rendered in the browser once all your scripts load.
在这里，您在浏览器上完全运行了反应物js。这是最简单的设置，包含了大多数示例(包括http://反应物js.org上的示例)。服务器呈现的初始HTML是占位符，在加载所有脚本之后，整个UI将在浏览器中呈现。
Server-Side
Think of ReactJS as a server-side templating engine here (like jade, handlebars, etc...). The HTML rendered by the server contains the UI as it should be and you do not wait for any scripts to load. Your page can be indexed by a search engine (if one does not execute any javascript).
把堆js看作服务器端模板引擎(比如jade、handlebar等)。由服务器呈现的HTML包含UI，您不必等待任何脚本加载。您的页面可以被搜索引擎索引(如果不执行任何javascript)。
Since the UI is rendered on the server, none of your event handlers would work and there's no interactivity (you have a static page).
由于UI是在服务器上呈现的，所以没有任何事件处理程序可以工作，也没有交互性(您有一个静态页面)。
Both
Here, the initial render is on the server. Hence, the HTML received by the browser has the UI as it should be. Once the scripts are loaded, the virtual DOM is re-rendered once again to set up your components' event handlers.
这里，初始呈现在服务器上。因此，浏览器接收到的HTML具有应有的UI。加载脚本之后，将再次重新呈现虚拟DOM，以设置组件的事件处理程序。
Over here, you need to make sure that you re-render the exact same virtual DOM (root ReactJS component) with the same props that you used to render on the server. Otherwise, ReactJS will complain that the server-side and client-side virtual DOMs don't match.
在这里，您需要确保使用在服务器上使用的相同的工具重新呈现相同的虚拟DOM(根反应物js组件)。否则，堆js会抱怨服务器端和客户端虚拟dom不匹配。
Since ReactJS diffs the virtual DOMs between re-renders, the real DOM is not mutated. Only the event handlers are bound to the real DOM elements.
由于堆js在重新呈现之间分散虚拟DOM，所以真实的DOM没有发生突变。只有事件处理程序绑定到真正的DOM元素。
#2
19
Image source: Walmart Labs Engineering Blog
图片来源:沃尔玛实验室工程博客
NB: SSR (Server Side Rendering), CSR (Client Side Rendering).
NB: SSR(服务器端呈现)，CSR(客户端呈现)。
The main difference being that with SSR, the servers response to the clients browser, includes the HTML of the page to be rendered. It is also important to note that although, with SSR, the page renders quicker. The page will not be ready for user interaction until JS files have been downloaded and the browser has executed React.
主要的区别在于，使用SSR时，服务器响应客户机浏览器，包括要呈现的页面的HTML。同样需要注意的是，尽管使用SSR，页面呈现速度更快。在下载了JS文件并执行了response之后，页面才可以进行用户交互。
One downside is that the SSR TTFB (Time to First Byte) can be slightly longer. Understandably so, because the server takes some time creating the HTML document, which in turn increases the servers response size.
一个缺点是SSR TTFB(时间到第一个字节)可能稍微长一些。可以理解，因为服务器需要一些时间来创建HTML文档，这反过来又增加了服务器的响应大小。
#3
1
I was actually wondering the same researching quite a bit and while the answer you are looking for was given in the comments but I feel it should be more prominent hence I'm writing this post (which I will update once I can come up with a better way as I find the solution architecturally at least questionable).
我实际上是想相同的研究不少,你正在寻找的答案是在评论但是我感觉它应该更加突出因此我写这篇文章(我将更新一旦我能想出一个更好的方法,我发现解决方案架构上至少有问题)。
You would need to write your components with both ways in mind thus basically putting if switches everywhere to determine whether you are on the client or the server and then do either as DB query (or whatever appropriate on the server) or a REST call (on the client). Then you would have to write endpoints which generate your data and expose it to the client and there you go.
您需要同时考虑这两种方式来编写组件，从而基本上将if开关放在各处，以确定您是在客户机还是服务器上，然后以DB查询(或服务器上的任何适当的查询)或REST调用(在客户机上)的方式执行。然后必须编写生成数据的端点，并将其公开给客户端。
Again, happy to learn about a cleaner solution.
再次，很高兴了解到一个更干净的解决方案。