Forced business – the world is not worth, after two days I came again, mainly I love east do things, too love learning is also a burden, (forced business), such a cold day to study hard to see things (the world is not worth), these two days is cold ah. Cold cold nose, do not know is the nose is too big or the weather is too cold there is always a kind of spread how many pants or did not wear the same, walking on the road in the heart panic not, for fear of which grass jumped out of three strong man a surname De Name ma a surname De name state a surname De name… No, no. Virtue is not the name of the savage king. Back to business, I have been a little curious about the implementation of the first screen rendering, because the development cost is too high, so I did not practice. Today sort out the recent SSR understanding, do not like to spray pure personal records.

  1. Server render definition

    Before we get to that, we need to talk a little bit about the rendering process

    1. The browser requests an HTML text
    2. The renderer parses the HTML text and builds a DOM tree
    3. While parsing HTML, download and build stytle rules if you encounter inline styles or style scripts, or download execution scripts if you encounter JavaScript scripts
    4. After the DOM tree and style rules are built, the render process merges them into a render tree.
    5. The render process starts to layout the render tree, generating a layout tree.
    6. The rendering process draws the layout tree and generates a drawing record
    7. The rendering process layers the layout tree, rasterizes each layer separately, and produces composite frames
    8. The renderer process sends the composited frame information to the GPU process for display on the page

    As you can see from the figure, the browser goes through a number of steps from receiving the HTML to rendering it to a page. The most popular front-end frameworks use javascript for page rendering, which means that when javascript scripts are executed, the HTML page is already parsed and the DOM tree is built, javascript scripts just dynamically change the structure of the DOM tree, Making the page look the way it wants to look is called dynamic rendering, or client rendering.

    Server render: As the name implies, server-side rendering is when the browser requests the page URL, the server will assemble the HTML text we need and return it to the browser. After the HTML text is parsed by the browser, it can directly build the desired DOM tree and display it in the page without the execution of JavaScript script. This server-side HTML assembly process is called server-side rendering. In my words, the backend server returns the HTML string and feeds it directly to the browser, which is essentially a static page feeling, so that the browser is really doing less work, so that the browser will respond quickly

    Although it is a long text but to be patient to read the benefits of the shallow

  2. Origin of SSR development (in ancient times, one god led to the hegemony of many gods)

    1. WEB1.0 era (ancient sage king)

      Ancient times we may not have experienced, but asp, JSP, these may have heard of it, all the application server is rendering (at that time the service side rendering and we say now is not the same as the server side rendering), saying that the page render fully borne by the server, the browser request the url of the page, then the server receives a request, Query to the database. The template (ASP, JSP) that throws data to the back end renders it into HTML fragments and then returns them to the browser. At this point, the HTML returned is already complete with JS and so on, and there is no Javascript involved in rendering to the page. As shown in figure tells

      Page F12 view zhang like this

    2. Client-side rendering

      On a side note: WEB1.0 server rendering is getting worse and worse, and every time you update a small place on a page, whether it’s text or some other small module, you need to re-request the page, re-search the database, and re-compose an HTML. The javascript code is mixed with the PHP code on the back end. It’s getting harder and harder. Of course, at this time the front end position is very low, the front end of the work is often a shuttle ha backend staff, front end personnel are often dominated by the back end of the fear of domination, the front end of the contempt chain began, because the front end of the program ape just write JS to do page interaction, not the real program ape.

      Then NodeJS came along, and the front end saw an opportunity to turn around. In order to get rid of the back end, the front end started a movement to separate the front end from the back end, hoping to develop independently. Front and back end separation, on the surface looks like code separation, in fact is to front and back end personnel separation (to here have to say the front end personnel’s mind is really ha ha ha ha ha ha), that is, front and back end separation, the front end no longer belongs to the back end team.

      With the separation of the front and back ends, the web began to be treated as a Single Page Application (SPA), with the front end team taking over all Page rendering and the back end team providing all apis for data query and processing

      The general process is like this: First, the browser requests the URL, and the front-end server returns an empty static HTML file (without any database lookup or template assembly) loaded with JavaScript scripts and CSS stylesheets for rendering the page. The browser takes the HTML file and loads the scripts and stylesheets. At this time, the script requests the API provided by the back-end service to obtain the data. After obtaining the data, it dynamically renders the data to the page through JavaScript script to complete the page display.

      Page F12 view zhang like this

    3. Server side rendering

      So we’re finally getting to the point, with the development of single-page applications. People gradually found a thing ah, ah SEO problems ah, search engines are difficult to climb to things ah. And as applications become more complex and javaScript becomes more bloated, the first screen rendering time is slower than WEB1.0. This is a big problem, again, the first screen is not the home page (underline).

      I can’t help it. We can’t go back to being dictated to by backstage people, can we? Dominate the fear again ha ha ha ha, how to do Their choice of road kneeling also to go out, so the front team again, I found the front end is can STH over and over again, but I like ha ha ha)

      So the front-end team chose to use NodeJS to render the page on the server, which led to server-side rendering again. The general process is somewhat similar to client-side rendering,

      1. First, the browser requests the URL. After the front-end server receives the URL request, the front-end server requests the data from the back-end server according to the different URL. After the request is completed,
      2. The front-end server assembles an HTML text with the specific data and returns it to the browser, which takes the HTML and starts rendering the page
      3. At the same time, the browser loads and executes JavaScript scripts to bind events to elements on the page, making the page interactive. When users interact with the browser page, such as jumping to the next page, the browser will execute JavaScript scripts.
      4. The back-end server requests the data, retrieves the data, and then executes the JavaScript code again to render the page dynamically. You know, it’s time to do this

  3. Pros and cons of server-side rendering

    There are two advantages

    1. SEO benefits. It goes without saying that, compared to an empty div block, displaying more content on the page is more conducive to crawling your page, so that the traffic will be higher and the search engine will include more.
    2. White screen time is more. Compared to client rendering, server rendering already gets a dull HTML text after the browser requests the URL. The browser just needs to parse the HTML and directly build the DOM tree. The client needs to get an empty HTML page first, and then the page enters the blank screen. After that, it also needs to load and execute javascript, request the backend to obtain data, and render the page with javascript to see the final page, which takes a long time and has poor experience.

    disadvantages

    1. In order to achieve server-side rendering, the code complexity increases, and the code needs to be compatible with both server-side and client-side running conditions.
    2. More load balancing is required and the server is under pressure
    3. Deployment and build Settings are more demanding and require Nodejs knowledge

  4. Vue is finally going to code for profiling (drawing is really hard)

    Next address