javascript - What is front-end rendering? What is server-side rendering? What are the differences between the two and their application scenarios?

Question

Now I just use the framework to write SPA on the front end, and then just process the database-related data in the background, and pass the data through restful API before and after. As for these renderings, I have no idea. The so-called server-side rendering refers to generating HTML files in the background and passing them to the front-end. For react and Vue...

黄舟 · Answer

It’s difficult to explain clearly in a few words, you can refer to the link below:
Front-end rendering and back-end rendering
What are the differences between back-end rendering html, front-end template rendering html, and jquery html?
Intensive reading on the debate between front-end and back-end rendering

ringa_lee · Answer

First render, here you should only assemble data and template into html.

In the case of front-end and back-end separation plus SPA, in addition to redirecting requests with authentication on the critical path, the general routing logic of the back-end is shared by the front-end and the front-end, and part of the processing logic is also shared by the front-end and back-end. The end provides a data interface, and the data processing logic related to the interface is unique to the backend.

In the SPA scenario
Server-side rendering is for the first get request, used to produce complete html to the browser, and the browser directly displays the first screen.
Client-side rendering is all about client state changes, requesting data, and making local DOM changes (the local area may be as large as the entire body).
react/vue In this scenario, the server only converts jsx/template into html, and the client coordinates the synchronization between the virtual dom and the real dom according to props/state changes.

In the traditional front-end and back-end separation scenario,
the back-end is responsible for rendering the complete html, and the front-end js is responsible for changing a few text animations and the like after interaction. There is no front-end rendering.

Review:

Virtual dom only exists on the front end and is used to coordinate the differences between virtual dom and real dom and minimize updates to the real dom.
Front-end rendering refers to parsing data and templates and generating DOM. Same as the backend.
Yes, the same meaning, in the web scenario.
Front-end rendering: I don’t want to request the server to regenerate the entire dom scene every time there is a small change. Server-side rendering: In most scenarios, the extreme scenario is when js is disabled on the client side. For scenarios where only front-end rendering is used, it is estimated that the company structure does not allow react/vue to render (the node server has not yet been deployed). Usually, there is both front-end and back-end rendering.

某草草 · Answer

A bad habit in the IT industry is to create a fancy term so that you don’t know the specific details:

Back-end rendering: Before the back-end program spits out the HTML page to the front-end, it first fills specific areas and specific symbols on the HTML page with data, and then throws it to the front-end. This is back-end rendering. The so-called rendering, you It can be understood as a modification. The word rendering originally came from the field of games, and the field of games originated from real-life painting. Rendering is just applying paint to paper. In the past, most servers were in this mode

Front-end rendering: The back-end html page exists as a static file. When the front-end requests it, the back-end does not make any content modifications to the file and directly returns it to the front-end in the form of resources. After the front-end gets the page, it will render it according to the content written on the html page. js code to modify (paint) the content of the html. This is the front-end rendering