Front-end rendering and back-end rendering, front-end routing and back-end routing


1. Backend rendering

In the early days when the front and back ends of the web page were not separated, the back-end rendering was more. When we visited the website, the corresponding data would be processed on the server and returned directly to a rendered page, and the front-end was only responsible for displaying. In this case, the rendered page does not need to load any js and css separately, and can be directly presented to the browser for display.

The advantage of back-end rendering is that it is conducive to SEO optimization .

The disadvantage is that the code structure is more complicated, and development and maintenance are inconvenient.

  • In one case, the modules of the entire page are written and maintained by back-end personnel
  • Another situation is that if front-end developers want to develop pages, they need to write page code through languages ​​such as PHP and Java.
  • Under normal circumstances, HTML code and data and corresponding logic will be mixed, writing and maintaining are very bad things

Second, front-end rendering

With the advent of AJAX, the model of separation of front and back ends has been implemented. The back-end only needs to provide the corresponding API and is not responsible for any content. The front-end processes the data after it gets the data, and finally renders it on the web page.

The advantage of front-end rendering is that the responsibilities of the front-end and the back-end are relatively clear, the back-end is mainly responsible for data, and the front-end is mainly responsible for interaction and visualization. Development and maintenance are more convenient.

Ajax is widely used in front-end rendering, most browsers cannot capture ajax data, and SEO friendliness is poor.

Three, back-end routing

A page has its own corresponding URL, which is url. When the browser switches between different URLs in the address bar, it sends a request to the background server every time, the server responds to the request, the server renders the entire page, and returns the page to the client .

Advantages : Sharing the front-end pressure, the splicing of html and data is done by the server.

Disadvantages : When the project is very large, it increases the pressure on the server side. HTML code and data and corresponding logic will be mixed together, which is not conducive to writing and maintaining.

Four, front-end routing

The core of front-end routing is to change the URL, but the page does not refresh as a whole.

  • With the advent of Ajax, there is a development model that separates the front and back ends
  • The back-end only provides API to return data, the front-end obtains data through Ajax, and can render the data to the page through JavaScript
  • The biggest advantage of this is that the front-end and back-end responsibilities are clear. The back-end focuses on data, and the front-end focuses on interaction and visualization.
  • And when the mobile terminal (iOS/Android) appears, the backend does not require any processing, and the previous set of APIs can still be used

Single-page rich application (SPA) : The main feature is the addition of a front-end routing on the basis of the separation of front-end and back-end.

5. Information

web single page application

https://zhuanlan.zhihu.com/p/26366128

Guess you like

Origin blog.csdn.net/weixin_43974265/article/details/112757909