concept

  • Server render (spit)

    Before the server returns the HTML, it fills it with data in certain fields, symbols, and gives it to the client, who is only responsible for parsing the HTML.

    Server side rendering

    Also known as fat-server, thin-client mode

    Server side rendering

  • Client render (fill in)

    HTML is only a static file. When the client side requests, the server side does not do any processing, but directly returns it to the client side in the form of the original file. Then, according to JavaScript on THE HTML, DOM is generated and HTML is inserted.

    Client-side rendering

    Also known as fat-client, thin-server mode

    Client-side rendering

Similarities and differences between

  • Rendering is essentially the same, string concatenation, rendering data into some fixed format HTML code to form the final HTML to display on the user’s page.

  • Concatenating strings inevitably incurs a performance cost.

    Server rendering performance is consumed on the server. When there are a large number of users, part of the data is cached to avoid repeated rendering of too much data. Client-side renderings, such as the popular SPA frameworks Angular, React, and Vue, mostly replace data tags (such as {{text}}) in the original HTML when first rendered. One of the more difficult aspects of client-side rendering is how to save resources when the page is updated in a responsive manner. Direct DOM reading and writing is very performance consuming. Vue 2.0 + has VNodes, after diff, render to the page.

The pros and cons

homogeneous

In order to solve the client rendering first screen slow and SEO problems, isomorphism began to appear.

Isomorphism: The front and back ends share JS, and the first rendering uses Node.js to render the HTML directly. Generally, isomorphic rendering is the common part between the front and back ends.

There are many isomorphic advantages balabalabala…

A brief description of some pits using Vue SSR (NUXT) :

  • The server must be Node.js or run a dedicated node.js to support it.

  • The document object cannot be found. It does not exist in the Node environment because the front end uses window.

  • A method called in the Created life hook will not work when the component is not instantiated (this cannot be used). Data requests and formatting operations should be placed in a dedicated data store or state container.

  • The performance of the string-based template is definitely better than that of the Virtual-dom-based template. The string-base template simply fills in the data. The Virtual-dom-based template needs to go through the Vue template syntax –> Vnode –> concatenate string HTML. For performance consumption comparison, please refer to this article mp.weixin.qq… ;

  • In terms of caching, you can only do page-level caching. Caching is not available if it is user-specific, meaning that different users need to render different content.

Are there other ways to address client side rendering deficiencies?

The answer must be:

  • For SEO issues, use prerender… Upgrade your search engine, and more.

  • White Screen can be loaded, Skeleton Screen, and more.

conclusion

User experience is king.