The difference between browser rendering and server rendering and the development of their respective suitable scenes


1) The difference between browser rendering and server rendering is that besides who generates html, there is also What? What scenarios are suitable for development? Is it a multi-page application suitable for server-side rendering that emphasizes information display? Re-interactive rendering suitable for browsers, will it be made into Single-page application? Is there any other criterion? What if we attach importance to both information display and interaction?
2) What are the popular UIkit, server-side rendering and browser-side rendering? I know Tomcat, nodejs is server-side rendering, angular, react and redux,vue is browser-side rendering, is this right? What else can I add?
3)tomcat’s javaweb program. Because the browser cannot execute and display jsp files, Tomcat server renders jsp files into html files so that the results of http url requests can be displayed in the browser. So, is ajax update data and html code inserted in JSP rendered by browser or server?

1) The difference between browser rendering and server rendering:
What is rendering?
If we just want to display a pile of unchanging data, then we can just write a a.html and throw it on the server for the client to access. However, this is basically impossible, and the data are generally changing. You can’t write a view for each set of data, so we need to separate the data from the view and then use a technique to plug the data into the view, which is called rendering. This work is done on the server, which is server rendering, and on the browser, which is browser rendering.

Rendering here refers to the process of generating html documents, which has nothing to do with browser rendering html.
Browser-side rendering refers to the use of js to generate html with the front-end routing. For example: React, Vue, etc. UIkit. Suitable for Single page application procedure.
Server-side rendering refers to the use of background language to generate html through some template engines. Examples: PHP files, JSP files, Python’s Flask (web framework) with Jinja engine, Django framework, Java with vm template engine, NodeJS with Jade. Suitable for multi-page applications. In fact, most websites are still in this form.
Therefore, React/Vue rendering is also used in order to make Single page application favorable for SEO and make the server and client isomorphic.
PS: Segmentfault is also server-side rendering.

Browser rendering
Single-page application basically uses browser rendering. The advantages are clear, the back end only provides data, the front end makes views and interactive logic, and the division of labor is clear. The server only provides interfaces, routing and rendering are all thrown to the front end, which reduces the computational pressure on the server. However, the weakness is that the user’s waiting time becomes longer, especially when the number of requests is large and there is a certain sequence.

Server rendering
After receiving the user’s request, the server calculates the data required by the user, and then updates the data into a view (i.e., a string of dom characters) and sends it to the client, which directly inserts the string of characters into the page. The advantage of doing this is that the response is quick, the user experience will be better, and it is also friendly for search engines, with SEO optimization. Nodejs layer of server rendering, there is also an obvious advantage is that the front-end performance optimization is more convenient, more room for operation. However, the shortcomings are also obvious. If a node layer is not added, the division of responsibilities between the front and back ends is unclear, and the parallel development cannot be well performed. In addition, it also increases the computing pressure of the server (although rendering cache can be done, after all, more computation is done).

Client rendering route: 1. request an html -> 2. server returns an html -> 3. browser downloads js/css file in html-> 4. waits for js file download to complete -> 5. waits for js load and initialization to complete -> 6. js code can finally run, js code requests data from backend (ajax/fetch) -> 7. waits for backend data to return -> 8. client renders data into response page from scratch to completeness

Server rendering route: 2. request an html -> 2. server request data (intranet request is fast) -> 3. server initial rendering (server performance is good and faster) -> 4. server return pages with correct content -> 5. client request js/css file-> 6. wait for js file download to complete-> 7. wait for js load and initialization to complete -> 8. client render the rest (content is small and rendering is fast)

For the same component, the server renders the “visible” part (render/componentWillMount part of the code). In order to ensure the component has perfect Life cycle and event handling, the client needs to render again. That is, server-side rendering is actually a secondary rendering that requires the client to perform again with little overhead.

According to the above characteristics, server rendering can be considered for pages with high user experience requirements (first screen) and public pages with more repetitions to reduce ajax requests and improve user experience.

Time-consuming comparison:

  1. Data Request: The server requests data instead of the client, which is one of the main reasons for “fast”. The server makes requests in the intranet and the data response speed is fast. The clients make data re quests in different network environments, and the overhead of http requests from external networks is large, resulting in time difference (the main reason).

  2. Step: The server first requests data and then renders the “visible” part, while the client waits for js code to download and load before requesting data and rendering. That is, the server does not need to wait for js code download before requesting data and returns a page with existing content.

  3. Rendering performance: server-side performance is higher than client-side performance and rendering speed is faster (guess, this data is unknown).

  4. Rendering Content: The server will render the “visible” part first, then give it to the client for partial rendering. The client-side rendering is from scratch and needs to go through the entire rendering process.

2) Right. Add: PHP files, JSP files, Python’s Flask (web framework) with Jinja engine, Django framework, Java with vm template engine, NodeJS with Jade are server-side rendering.

3)ajax dynamic html generation is browser rendering.