Before the rise of the front-end, the display of web pages is mostly back-end rendering, that is, server rendering. With the development of the front-end industry, the front-end work is more and more sophisticated. The front and back ends began to separate, with the front end focused solely on UI rendering. The back end only provides data and logic processing. In a nutshell, the front end writes the HTML template and lets the back end fill in the data directly, which is called back-end rendering. Front-end rendering is the rendering of data returned by an Ajax request interface. The back-end only writes interfaces, and the division of labor is more detailed.
Front-end rendering:
The front-end uses pre-written HTML templates to loop through the JSON data, concatenate strings (es6’s template string feature greatly reduces the cost of concatenating strings), and insert pages.
Benefits: Small amount of data transmitted over the network. Does not occupy the server computing resources (parsing template), template in the front end (it is likely only part of the front end), change the structure change interaction are the front end themselves, change their own adjustment.
Disadvantages: Front-end time-consuming, front-end staff level requirements are relatively high. There is more front-end code, because some of the interaction logic previously handled in the background is handed over to the front-end. A small portion of client computing resources are used to parse templates.
Back-end rendering:
Front-end request, back-end with backend template engine directly generate HTML, front-end received data, directly inserted into the page.
Benefits: Less front-end time-consuming, that is, the first screen time is reduced, and the template is unified on the back end. The front end is (relatively) easy and does not occupy client computing resources (parsing templates)
Disadvantages: Occupies server resources.
Front-end rendering vs. back-end rendering:
Back-end rendering: </