Shulou(Shulou.com)06/01 Report--

This article will explain in detail the differences between ssr and vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

The difference between ssr and vue is that ssr is returned after the server renders the component as a HTML string, while vue returns empty HTML, css, js, etc., after the client sends a request, and the component is rendered on the client.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

The difference between ssr and vue is

Ssr is the server rendering technology of vue, and nuxt is a framework that can be used for ssr server rendering development.

Ssr is the foundation of technology, nuxt is encapsulation.

What is SSR

Vue.js is the framework for building client applications. By default, you can output Vue components in a browser to generate DOM and manipulate DOM. All operations are run on the client side. In this case, you can't see anything before the lifecycle mounted, or if our client browser has js disabled, it will be blank.

However, vuejs can also render the same vue component as HTML strings directly on the server side, send them directly to the browser, and finally "activate" these static tags into fully interactive applications on the client side.

2. The difference between ssr and ordinary vue

Ordinary vue means that after the client sends a request, the server returns an empty HTML,css,js, etc., and renders on the client.

Ssr is returned after the server is rendered as a string

3. Render an vue instance initialization

Npm init

Download and install

Npm install vue vue-server-renderer-save

Create a js// step 1: create a Vue instance const Vue = require ('vue') const app = new Vue ({template: `Hello World`}) / / step 2: create a rendererconst renderer = require (' vue-server-renderer'). CreateRenderer () / step 3: render the Vue instance as HTMLrenderer.renderToString (app, (err, html) = > {if (err) throw err console.log (html) / / = > Hello World}) / / at 2.5.0 + If no callback function is passed in, Promise:renderer.renderToString (app) .then (html = > {console.log (html)}) .catch (err = > {console.error (callback)}) will be returned to call up the terminal display effect.

Node file name, displayin

Hello World

Fourth, download and install integrated with the server

Npm install express-save

Step 1 of js//: create a Vue instance const Vue = require ('vue') const express = require (' express') / / create a server const app = new Vue ({template: `Hello World`}) const server = express () / step 2: create a rendererconst renderer = require ('vue-server-renderer'). CreateRenderer () / / at 2.5.0, if no callback function is passed in Promise:renderer.renderToString (app) .then (html = > {console.log (html)}) .catch (err = > {console.error (err)}) server.get ("*", (req, res) = > {/ / step 3: render the Vue instance as HTML renderer.renderToString (app, (err) Html) = > {if (err) throw err console.log (html) res.send (html) / / = > Hello World}) / / Open the server and wait for the browser to access the server.listen (8080, (err) = > {console.log ("ok")) }) effect

Enter 127.0.0.1pur8080

Why / do you want to use server-side rendering (SSR)?

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

Better SEO, because the search engine crawler crawler can view fully rendered pages directly.

Faster content arrival time (time-to-content), especially for slow network conditions or slow-running devices. Instead of waiting for all the JavaScript to be downloaded and executed, your users will see the fully rendered page more quickly.

There are also some tradeoffs when using server-side rendering (SSR):

Limited by development conditions. Browser-specific code can only be used in certain lifecycle hook functions (lifecycle hook); some external extension libraries (external library) may require special handling to run in server rendering applications.

More requirements related to build setup and deployment. Unlike a fully static single-page application (SPA) that can be deployed on any static file server, the server rendering application needs to be in the Node.js server running environment.

More server-side load. Rendering a full application in Node.js obviously takes up more CPU resources (CPU-intensive-CPU intensive) than server, which only provides static files, so if you expect to use it in a high-traffic environment (high traffic), prepare the server load and use caching strategies wisely.

Before using server-side rendering (SSR) for your application, the first question you should ask is whether you really need it. This mainly depends on how important the content arrival time (time-to-content) is to the application. For example, if you are building an internal dashboard, the extra few hundred milliseconds during the initial load doesn't matter, in which case using server-side rendering (SSR) would be a mountain out of a molehill. However, content arrival time (time-to-content) requirements are absolutely critical metrics, in which case server-side rendering (SSR) can help you achieve the best initial loading performance.

This is the end of the article on "what's the difference between ssr and vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.