This is the 20th day of my participation in the August Text Challenge.More challenges in August

Introduction to the

In order to achieve good user experience and separation of the front and back ends, most of our applications are single-page applications, which obtain back-end data through interfaces and output components in the browser to generate DOM and manipulate DOM to achieve user interaction. 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 “blend” the static tags into a fully interactive application on the client side, which is server-side rendering.

Compare the benefits of server-side rendering for single-page projects

  1. Better SEO, because search engine crawler crawler tools can directly view fully rendered pages, single-page applications are based on routing, through Ajax asynchronously update a section of the page to achieve application effects, so crawler tools are unable to get pages.
  2. For slow networks or slow devices. It can provide the speed of obtaining web pages and has a good user experience. When a single-page application is loaded for the first time, it needs to send a packed JS (RequireJS or Webpack packed) to the browser before starting the application.

Using the vue SSR

Here we use the server-side single-page application rendering of Node.js Server.

Create projects to introduce dependencies

Environment: Node.js version 6+ After creating the folder, install vue and vue server rendering dependencies:

    npm init
Copy the code
    npm install vue vue-server-renderer --save
Copy the code

Install Node.js Web application Framework Express:

npm install express --save
Copy the code

Create a new demo.js to introduce dependencies and start our service:

const Vue = require('vue');
const vsRenderer = require('vue-server-renderer')
const server = require('express') (); server.get(The '*'.(req, res) = > {
  res.send('Hello World! ')
})

server.listen(8080);
Copy the code

Creating a page Template

Create a new index.html template:

<html>
  <head>
    <! With double mustache for HTML escape interpolation htMl-escaped interpolation -->
    <title>{{ title }}</title>

    <! Mustache for HTML unescaped interpolation -->
    {{{ metas }}}
  </head>
  <body>
    <! --vue-ssr-outlet-->
  </body>
</html>
Copy the code

Note that
Comments — This is where the application’s HTML tags will be injected.

We can then read and transfer files into the Vue renderer:

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

renderer.renderToString(app, (err, html) = > {
  console.log(html) // HTML will be the full page injected with the application content
})
Copy the code

integration

Finally we code integration, complete the simple SSrdemo:

const Vue = require('vue');
const vsRenderer = require('vue-server-renderer')
const server = require('express') ();const template = require('fs').readFileSync('./index.html'.'utf-8');
const renderer = vsRenderer.createRenderer({
  template,
});

const context = {
    title: 'vue ssr'.metas: ` 
       
       `}; server.get(The '*'.(req, res) = > {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>Hello SSR</div>`}); renderer .renderToString(app, context,(err, html) = > {
    console.log(html);
    console.log('err', err)
    if (err) {
      res.status(500).end('Internal Server Error')
      return;
    }
    res.end(html);
  });
})

server.listen(8080);
Copy the code