Single-page ReactJS app using both server-side and client-side rendering?
Question
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).
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 answers
solution1
4 ACCPTED 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. 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>
<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. 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. After this, the rest of the populating of the html file will happen as usual.
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
solution2
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. 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. 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.
The server is a remote computer that our local computer must contact over the internet to fetch data from. If react is running on the server (server-side), it can render HTML first, then send it over the internet to our computer.
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. 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.
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. 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.