Front-end rendering:
Refers to a rear end of the return JSON data, using a predetermined writing distal html template, JSON data read cycle, string concatenation (es6 characteristic template string greatly reduces the cost of string concatenation), and inserted into the page.
Benefits: Small network traffic data. Do not take up server computing resources (parsing template), the template in the front (probably only partially in the front), change the structure of interaction have become the front themselves, changed completely their own tune on the line.
Disadvantages: front-end time-consuming, horizontal front-end staff requirements are relatively high. More front-end code, as part of the interaction logic previously processed in the background to the front-end processing. Occupy a small part of the client computing resources for parsing templates.
Back-end rendering:
The front end of the request, a rear end directly generated html background template engine, after the front end receiving the data directly into a page.
Benefits: front-end and less time-consuming, a reduction of the first screen time, unified template at the back end. Front-end (relatively) easy, do not take the client computing resources (parsing template)
Disadvantages: take up server resources.
Rendering Rendering the front end and the rear Comparison:
Back-end rendering:
Page rendering speed: fast, limited by the user's bandwidth
traffic consumption: a little less (omit the frame part of front-end code)
maintainability: Poor (front and rear ends of things put together, pinch frame for many years, has long been in trouble broke it )
SEO friendliness: good
coding efficiency: low (this different with different teams, may be wrong)
Front-end rendering:
Page rendering speed: mainly limited by the bandwidth and quality of the client machine, optimized, and can gradually expand the dynamic content, will feel a little faster.
Traffic consumption: a little bit (about a front-end framework 50KB) Of course, some with the rear end of the front part of the rendering of the project is also in use framework.
Serviceability: Good, separate front and rear end, each application service, so the code at a glance.
SEO friendliness: poor, extensive use of ajax, most browsers can not crawl ajax data.
Coding efficiency: high, only the front and rear ends of each thing you're good at, and finally back-end output interface, do not control the page renders, as long as the front and rear end staff good ability, efficiency is not low.