• Vue.jsIs a framework for building client applications. By default, output can be done in a browserVueComponent to build DOMAnd operating DOM. However, it is also possible to render the same component as a serverHTMLString, send them directly to the browser, and finally “activate” these static tags into a fully interactive application on the client side.

That is, SSR roughly means that vUE renders the entire HTML fragment of the label on the client side and completes the work on the server side. The HTML fragment formed by the server side is directly returned to the client side. This process is called server side rendering. Advantages and disadvantages of server rendering SSR are as follows:

  • (1) Advantages of server-side rendering:

Better SEO: Because the content of SPA page is obtained through Ajax, and the search engine crawl tool does not wait for the completion of Ajax asynchronism before grabbing the page content, so the content of SPA page obtained through Ajax cannot be captured; SSR is directly returned by the server to the rendered page (data has been included in the page), so the search engine crawler can grab the rendered page; Faster content arrival time (faster loading on the first screen) : SPA will wait for all Vue compiled JS files to be downloaded before rendering the page. File download takes a certain amount of time, so rendering on the first screen takes a certain amount of time. SSR directly returns the page rendered by the server directly, without waiting to download JS files and render again, so SSR has a faster content arrival time;

  • (2) Disadvantages of server-side rendering:

    • More development constraints: for example, server-side rendering is only supportedbeforCreateandcreatedTwo hook functions, which cause some external extension libraries to require special handling to run in a server-side rendering application; And a fully static single-page application that can be deployed on any static file serverSPADifferent, server-side rendering applications need to be in Node.js serverOperating environment;
    • More server load: inNode.js Render a complete application, which will obviously be better than just providing static filesserver More extensive occupationCPU Resources (CPU-intensive - CPUDense), so if you expect a high traffic environment (high traffic ), prepare the appropriate server load, and use caching strategies wisely.