SSR is vUE server rendering technology, NUxT is a framework that can be used to do THE DEVELOPMENT of SSR server rendering

First, what is SSR?

Vue.js is a framework for building client applications. By default, the Vue component can be exported to the browser for DOM generation and DOM manipulation. All operations are run on the client side. In this case, vuejs can render the same Vue component directly as an HTML string on the server side. In this case, vuejs can render the same Vue component directly as an HTML string on the server side. Send them directly to the browser, and finally “activate” these static tags as fully interactive applications on the client side

Ii. Differences between SSR and common VUE

Normal VUE is after the client sends a request, the server returns empty HTML, CSS, JS and so on. SSR is returned after the client renders it into a string

Render a VUE instance

Initialize the

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: `<div>Hello World</div>`
})

// Step 2: Create a renderer
const renderer = require('vue-server-renderer').createRenderer()

// Step 3: Render the Vue instance as HTML
renderer.renderToString(app, (err, html) = > {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

// In 2.5.0+, if no callback function is passed in, a Promise is returned:
renderer.renderToString(app).then(html= > {
  console.log(html)
}).catch(err= > {
  console.error(err)
})
Copy the code

Bring up the terminal display effect

Hello World

Fourth, with the server integration

Download and install

npm install express --save

js

// Step 1: Create a Vue instance
const Vue = require('vue')
const express = require('express')// Create a server
const app = new Vue({
    template: `<div>Hello World</div>`
})

const server = express()


// Step 2: Create a renderer
const renderer = require('vue-server-renderer').createRenderer()

// In 2.5.0+, if no callback function is passed in, a Promise is returned:
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)

        // => <div data-server-rendered="true">Hello World</div>})})// Open the server and listen for the port to be accessed by the browser
server.listen(8080.(err) = > {
    console.log("ok");
})
Copy the code

The effect

Input 127.0.0.1:8080

Why/Should WE use server-side rendering (SSR)?

The main advantages of server-side rendering (SSR) over traditional SPA (single-page Application) are:

  • Better SEO, thanks to search engine crawler crawler tools can view fully rendered pages directly.
  • Faster time-to-content, especially for slow network conditions or slow-running devices. Instead of waiting for all the JavaScript to download and execute, your users will see the fully rendered page more quickly.

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

  • Development conditions are limited. Browser-specific code that can only be used in some lifecycle hook functions; Some external extension libraries may require special processing to run in a server rendering application.
  • 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, a server rendering application needs to be in a Node.js Server environment.
  • More server-side load. Rendering a full application in Node.js is obviously more CPU-intensive than a server that only serves static files, so if you expect to use it in a high traffic environment, Prepare your server load and use 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 depends largely on how important the time-to-content is to the application. For example, if you’re building an internal dashboard where the extra few hundred milliseconds of initial loading don’t matter, using server-side rendering (SSR) in this case would be a storm in a teacup. However, the time-to-content requirement is an absolutely critical metric, and in this case, server-side rendering (SSR) can help you achieve the best initial load performance.