Easy server-side rendering

Basic server rendering requires the installation of several important modules

npm i vue vue-server-renderer express
Copy the code

Create the file server.js in the root path

Simple server

The first step is to build a simple server that returns HTML code on the server side because it is server-side rendering

// server.js
const server = require('express') ()// Returns information when the browser requests the address
server.get('/'.(req, res) = > {
  // Here the HTML code is returned to the browser
})

// Listen on the port
server.listen(3000.() = > {
  console.log('server is running at 3000')})Copy the code

Build HTML code on the server side

There are two steps to building HTML code:

  • Instantiate the vue
  • Render vUE instances as HTML strings using vue-server-renderer
// Get the renderer to render the Vue instance into HTML code
// Return using server render
const Vue = require('vue')
const server = require('express') ()// Renderer, used to render vue as HTML code
const renderer = require('vue-server-renderer').createRenderer()

server.get('/'.(req, res) = > {
  // instantiate vue
  const app = new Vue({
    data: {
      url: req.url
    },
    template: '
      

        accesses the URL: {{URL}}
      
'
  })

  // Render the app instance into HTML with renderer
  renderer.renderToString(app, (err, html) = > {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    // Returns the compiled HTML code to the browser
    res.end(html)
  })
})

// Listen on the port
server.listen(3000.() = > {
  console.log('server is running at 3000')})Copy the code

HTML template

The HTML code compiled with the VUE instance contains only the body part, so we also need the parts of the HTML page, such as the HTML tag and the head tag

index.template.html

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>document</title>
</head>
<body>
  <! --vue-ssr-outlet-->
</body>
</html>
Copy the code

server.js

const fs = require('fs')

// Define the template
const renderer = require('vue-server-renderer').createRenderer({
  template: fs.readFileSync('./index.template.html'.'utf-8')})Copy the code

is mandatory and unmodifiable. It is used to identify where the vUE instance compiled code needs to be inserted. That is, future HTML code compiled by renderer will replace
tag

Interpolation is used in templates

If we want to use external data in the template, we can do so through interpolation

index.template.html

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <! With double mustache for HTML escape interpolation htMl-escaped interpolation -->
  <title>{{ title }}</title>
  <! Mustache for HTML unescaped interpolation -->
  {{{ meta }}}
</head>
<body>
  <! --vue-ssr-outlet-->
</body>
</html>
Copy the code

server.js

// Template context
const context = {
  title: 'Here's the title.'.meta: '<meta name="description" content="SSR">'
}

// Render the app instance into HTML with renderer
renderer.renderToString(app, context, (err, html) = > {
  if (err) {
    res.status(500).end('Internal Server Error')
    return
  }
  // return code to the front end
})
Copy the code

Continuously updated…