使用服务器端和客户端渲染的单页ReactJS应用程序？
[英]Single-page ReactJS app using both server-side and client-side rendering?
问题描述
I understand that on the client-side, React will re-render parts of the DOM that need to be updated anytime state changes, so there is no need to reload the entire page after the initial page load (so it will be a single-page app). 
我了解到，在客户端，React会在状态更改时随时重新渲染需要更新的DOM部分，因此无需在初始页面加载后重新加载整个页面（因此它将是单个页面应用）。
With server-side rendering, do I still this single-page app functionality? 使用服务器端渲染时，我仍可以使用此单页应用程序功能吗？
There is a similiar question about this topic but I believe it does not answer my question. 关于这个话题有一个类似的问题 ，但我相信它不能回答我的问题。 If I want to achieve a single-page application, do I have to use both server-side and client-side rendering? 如果要实现单页应用程序，是否必须同时使用服务器端渲染和客户端渲染？
2 个解决方案
解决方案1
4 已采纳 2018-01-31 06:18:57
Yes, you will still have single page functionality. 是的，您仍将具有单页功能。 Server rendering is when the initial html page that is rendered is populated before being send to the client. 服务器渲染是指在将要渲染的初始html页面发送到客户端之前对其进行填充。 in client side rendering, an html file which is not populated is send to the client, which in most cases will look something like this 在客户端渲染中，未填充的html文件发送到客户端，在大多数情况下，该文件看起来像这样
<html>
<body>
<div id="app"/>
<body>
</html>
React will populate the contents of this html page after loading the js files and querying the server for data. 在加载js文件并向服务器查询数据后，React将填充此html页面的内容。 The problem with this is web-crawlers will be unable to crawl through the web page since the only thing the crawlers are going to see is the above file without content. 问题在于网络爬虫将无法爬网网页，因为爬虫唯一会看到的就是上面没有内容的文件。 So in server side rendering the contents of the html file are populated before they are send to the client. 因此，在服务器端渲染中，在将html文件的内容发送到客户端之前，先对其进行填充。 After this, the rest of the populating of the html file will happen as usual. 此后，其余的html文件填充将照常进行。
The only difference between server side rendering and client side rendering is where the initial rendering of the web page takes place. 服务器端渲染和客户端端渲染之间的唯一区别是网页的初始渲染发生的位置。 the rest of the renderings take place in client itself 其余的渲染图发生在客户端本身中
解决方案2
4 2018-01-31 06:31:08
About single page app and server-side vs client-side rendering 关于单页面应用程序和服务器端与客户端渲染
If you wish to have a single-page app with ReactJS, you must have your react code running on the client-side. 如果您希望使用ReactJS使用单页应用程序，则必须在客户端运行React代码。 The server-side rendering is optional as far as a single-page app is concerned. 就单页应用程序而言，服务器端呈现是可选的。
React determines what the HTML should be based on the state. React根据状态确定HTML应该是什么。 A single-page app means we load the page once, and it will update as needed without having to request a full page reload from the server. 单页应用程序意味着我们只需加载一次页面，它将根据需要进行更新，而无需从服务器请求重新加载整个页面。 In order to have a single-page app, we must load React into the browser (client-side) so that React can dynamically update the parts of HTML without needing to reload the entire page. 为了拥有一个单页面的应用程序，我们必须将React加载到浏览器（客户端）中，以便React可以动态更新HTML的各个部分，而无需重新加载整个页面。
The server is a remote computer that our local computer must contact over the internet to fetch data from. 该服务器是一台远程计算机，我们的本地计算机必须通过Internet与之联系才能从中获取数据。 If react is running on the server (server-side), it can render HTML first, then send it over the internet to our computer. 如果react在服务器（服务器端）上运行，它可以先呈现HTML，然后通过Internet将其发送到我们的计算机。
The client is our own local computer. 客户端是我们自己的本地计算机。 If the server doesn't send the ReactJS to the client to load, and only sends HTML, then each time the client wants to change the state, it will have to contact the server and ask it for new HTML, having to do a full-page reload. 如果服务器没有将ReactJS发送给客户端以进行加载，而仅发送HTML，那么每次客户端要更改状态时，它都必须与服务器联系并要求其提供新的HTML，这需要做一个完整的工作。页重新加载。 However, if we have our ReactJS code loaded on the client, then it will know how to update the parts of the HTML based on the state without needing to contact the server. 但是，如果我们在客户端上加载了ReactJS代码，那么它将知道如何根据状态更新HTML的各个部分而无需联系服务器。
For a single-page app, all you need is react code running on the client-side so that the browser can render and update parts of the page without having to request the full page from the server. 对于单页应用程序，您需要做的是在客户端运行反应代码，以便浏览器可以呈现和更新部分页面，而无需从服务器请求整个页面。 It is optional to do server-side rendering. 服务器端渲染是可选的。
The benefit of server-side rendering 服务器端渲染的好处
Without server side rendering, the server would first send all of the react code to the browser. 如果没有服务器端渲染，服务器将首先将所有反应代码发送到浏览器。 Then the browser would have to load it. 然后，浏览器将不得不加载它。 Then it would have to run it. 然后就必须运行它。 Then it would render the page to show the user. 然后它将呈现页面以显示用户。
With server-side rendering, the server already has the code loaded. 通过服务器端渲染，服务器已经加载了代码。 As soon as the browser requests the page, the server sends the rendered HTML, so the browser doesn't need to wait for the code to load and run before it shows the user something. 一旦浏览器请求页面，服务器就会发送呈现的HTML，因此浏览器无需等待代码加载并运行就可以向用户显示内容。 The user will immediately see the rendered app. 用户将立即看到渲染的应用程序。
Server-side rendering also helps with search engine optimization, as it allows search engines to crawl and index your app as a static page without having to run the client-side javascript code to get the html that represents your app. 服务器端渲染还有助于优化搜索引擎，因为它允许搜索引擎将您的应用程序爬网并编制为静态页面索引，而无需运行客户端JavaScript代码来获取代表您的应用程序的html。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.