On the merits of server side rendering and client side rendering, the Internet has had a lot of articles for analysis, here I talk about my personal views.

First, let’s talk about the main pros and cons of both rendering methods:

Server-side rendering (to list only the most prominent pros and cons at the moment) :

Best:

  • SEO friendliness (in the current situation, I think it is the biggest advantage and the biggest need)
  • Fast first screen rendering (no need to download bloated bundle.js)

Bad:

  • Increased server stress (this can be fatal during heavy traffic and can lead to server failure)
  • Single interaction mode, asynchronous refresh is not possible (asynchronous refresh can be realized by inserting JS code binding events in THE HTML at the back end)

The pros and cons of client-side rendering are the opposite of server-side rendering.

More than ten years ago, when javascript has not risen, web development is still using traditional ASP, Java, PHP and other languages, rendering is limited to the server side rendering. But as jQuery grows and asynchronous loading matures, so does the front end. With the continuous improvement of interactive experience and the pursuit of page performance by groups of front-end developers, excellent front-end framework libraries have emerged in recent years, such as the most popular Angular, React, Vue, Next-js, Ali’s Beidou framework and so on. It can be said that js is now a hundred schools of thought contend.

From the backend language-driven server-side rendering at the beginning, to the client-side rendering led by front-end frameworks like React, there has been a qualitative improvement in both user experience and performance. When we are enjoying the comfort of client rendering, some Internet enterprises quietly changed back to the server rendering, such a practice against the direction of development, it is a helpless choice, on the one hand, in order to deal with a certain degree of embarrassment in domestic SEO. React also implements renderToString to convert dom structures generated from data into strings, which can be exported from the back end to the front end. It is not known whether Vue and Angular implement similar methods, but if you are interested, check out the documentation on their official website.

As far as I know, Google has implemented crawling data by implementing javascript code in the page, that is to say, Google has been able to crawl the page rendered by the client (not to worship foreign things, indeed they do better than China), while China, to a certain extent, is still stuck in the stage of crawling HTML. Simple client rendering, HTML file is no substantial content, all content is loaded asynchronously through JS, so a certain degree of client rendering page, only two eyes a black.

However, domestic search engines will eventually achieve the client render page crawling, it is just a matter of time. Although at present, the biggest advantage of server-side rendering is that client-side rendering cannot be solved, as time goes by and the Internet advances, this will no longer be a problem.

Let’s talk about the first screen rendering. For those of you who have used React or Vue, the bundled bundle.js file is usually over 1M in size, and the entry JS file is usually downloaded before rendering the home page, and then the JS file is run to fetch data and render the page. This is a mechanism for spa page loading. Js running, data acquisition, page rendering these are the work of the browser, based on the current V8 engine, these steps can be quickly completed, and this more than 1M or even larger entry JS download is a very big problem. If it is a PC terminal, in the current domestic normal user network environment, this size of the file is not a problem, but if it is a mobile terminal, you have to consider it. In the 4G network environment, the 1M files can be said to be very easy to download, can be downloaded in 1 second; On a 3G network, 1M takes about 4 to 5 seconds to download, which already affects the user experience. On 2G networks, or in places with poor reception, this can be a terrible time, causing users to wait for a long blank screen and even creating the illusion that the current page is no longer open.

Client rendering process

In view of the problem that the first screen rendering is very slow under the condition of bad network, some people put forward the idea of isomorphism. It means that the front and back ends use the same set of code, the first screen is rendered by the server, and the rendered HTML is directly handed to the browser for rendering. After rendering the first screen, the browser continues to download bundle.js, run JS, and re-render the page. As the rendered HTML stream is much smaller than bundle.js, the problem of slow rendering of the first screen can be solved to some extent by adopting the isomorphic web page, and the reasonable use of cache strategy can also reduce the pressure on the server to some extent. Of course, there are other problems with this model, which I won’t go into here.

Isomorphic rendering flow

Using homogeneous this kind of development mode, although not completely solve the problem of SEO, but the first screen can be crawl, if the project is not similar to taobao this content type site (the site within each page have SEO requirements), so this model is very good, solve the pure client-side rendering of two of the biggest problem facing in the present.

At the 12th D2 Front-end Conference this year, I heard another great idea that Ali has implemented and patented ———— Smart Downgrading strategy. Does a specific name that has not too clear, what is on the basis of homogeneous, preferred to use server rendering, when traffic surge caused more than setting the threshold value of the load on the server, smart will be treated as part of the rendering task to the client, the server under pressure to reduce (think of is very severe ah, after all, ali rich people have only).

There is no doubt that isomorphism or intelligent degradation in the face of the current domestic Internet development, is very space for development. However, if you need to consider the cost of development and hardware, pure client rendering still has advantages. Isomorphism may be a direction of Web development, but it is by no means the only way. The specific way to build projects needs to be determined according to the needs of specific projects.

The pictures in the article are from the name of isomorphism, and then talk about the necessity of Redux/Vuex