What is vue.js server-side rendering?

vue.js server-side rendering outputs Vue components in the browser to generate and operate DOM. However, the same component can also be rendered into server-side HTML strings and sent directly to the browser. processor, and finally "activate" these static tags into fully interactive applications on the client.

The operating environment of this tutorial: windows10 system, vue2.9, this article is applicable to all brands of computers.

【Recommended related articles: vue.js】

What is server-side rendering (SSR)?

Vue.js is a framework for building client-side applications. By default, Vue components can be output in the browser to generate DOM and manipulate DOM. However, it is also possible to render the same component as HTML strings on the server side, send them directly to the browser, and finally "activate" these static tags into a fully interactive application on the client.

Server-rendered Vue.js applications may also be considered "isomorphic" or "universal" in that most of the application's code can run on both the server and the client.

Why use server-side rendering (SSR)?

Compared with traditional SPA (Single-Page Application), the main advantages of server-side rendering (SSR) are:

• Better SEO, since search engine crawlers can view the fully rendered page directly.

• Please note that as of now, Google and Bing index synchronous JavaScript applications just fine. Here, synchronization is key. If your application initially displays a loading chrysanthemum and then fetches content via Ajax, the crawler will not wait for the asynchronous completion before crawling the page content. That said, if SEO is critical to your site and your pages fetch content asynchronously, you may need server-side rendering (SSR) to solve this problem.

• Faster time-to-content, especially for slow network conditions or slow devices. There's no need to wait for all JavaScript to finish downloading and executing before displaying server-rendered markup, so your users will see a fully rendered page faster. It generally results in a better user experience, and is critical for applications where time-to-content is directly related to conversion rate.

There are some trade-offs when using server-side rendering (SSR):

• Limited development conditions. Browser-specific code can only be used in certain lifecycle hooks; some external libraries may require special handling to run in server-rendered applications.

• More requirements involving build setup and deployment. Unlike fully static single-page applications (SPA), which can be deployed on any static file server, server-rendered applications require a Node.js server runtime environment.

• More server-side load. Rendering a complete application in Node.js will obviously take up more CPU resources (CPU-intensive) than a server that just serves static files, so if you expect to use it in a high traffic environment (high traffic), please Prepare server loads accordingly and employ caching strategies wisely.

The first question you should ask before using server-side rendering (SSR) for your application is whether you really need it. This mainly depends on how important time-to-content is to the application. For example, if you're building an internal dashboard, a few extra hundred milliseconds on initial load won't matter, and using server-side rendering (SSR) would be a no-brainer. However, time-to-content requirements are an absolutely critical metric, and in this case, server-side rendering (SSR) can help you achieve optimal initial load performance.

Server Side Rendering vs Prerendering (SSR vs Prerendering)

If you investigate Server Side Rendering (SSR) is only used to improve a few marketing pages (such as /, / about, /contact, etc.), then you may need to pre-render. Instead of using a web server to dynamically compile HTML in real time, pre-rendering simply generates static HTML files for specific routes at build time. The advantage is that setting up prerendering is simpler and allows you to treat your frontend as a completely static site.

Related free learning recommendations: JavaScript(Video)

The above is the detailed content of What is vue.js server-side rendering?. For more information, please follow other related articles on the PHP Chinese website!