Let vuE-CLI initialization after the project support server rendering, SSR combat

Kim /vue/%E8%AE%…

The current SPA architecture trend is in full blossom, but SEO seems to be a pain point, so many popular MV * and other frameworks also put forward solutions to this pain point. Vue officially provides a quick build project tool VUE – CLI, its convenience and speed is known to all. This article is to share how to integrate SSR(Server side Render) after using vue CLI to build a project. This article mainly explains the use of two ways to achieve SSR effect.

Git addresses for two examples:

1. vue-prerender-demo
2. vue-ssr-demo

My environment

• The node v8.5.0
• NPM v5.0.0
• Vue – cli v2.8.2
• MacOS 10.12.3

These are not important factors ~~

2. Method 1: Use prerender-SPa-plugin to obtain SSR effect.

2.1 illustrates

Plugin address: prerender-spa-plugin

Strictly speaking, this implementation is not called SSR, but prerender. But the effect is the same, maybe even better than SSR to some extent. Compared with complex SSR configuration, prerender configuration is simpler and faster. If there are no special requirements, you only need to add a plugin configuration to webpack. However, only h5 history routes are supported. Hash routes are not supported.

Prerender uses Phantom JS to simulate the browser environment, running the specified routing page in phantom JS so that the.vue will work in phantom and render. Prerender then takes the rendered DOM structure and writes it to the HTML file for the route. Once the service is started, enter the routing address in the real browser environment and the server returns prerender RENDERED HTML to the browser, thus achieving SSR effect.

2.2 the initialization

Vue init webpack vue-prerender-demo // This article is configured on webpack basisCopy the code

cd vue-prerender-demo
npm install
npm run dev
Copy the code

2.3 configuration

To facilitate testing, I made the following changes to the initialized demo:

1. The routingmodeModified tohistory
2. Add a Test component, rated with the Hello component, as a separate routing page
3. Modify therouter/index.jsAdded the configuration in/testRouting.
4. Added to the Hello component<router-link to="/test">/test</router-link>In the Test component<router-link to="/">

Then check the page and jump between the home page ->Test-> home page. Routing works.

2.4

1. Install prerender-spa-plugin because of dependencyphantom jsPhantom is a pain to set up and takes too long

npm install prerender-spa-plugin -D
Copy the code

2. Start prerender-related configuration:

Var PrerenderSpaPlugin = require('prerender-spa-plugin') // plugins: { //.... // configure prerender-spa-plugin new PrerenderSpaPlugin(// generate file path, Consistent with webpack packaged address path here. Join (config. Build. AssetsRoot), / / config. Build. The vue cli assetsRoot generate configuration, after packaging file address / / configuration to do pre-rendered routing, Only h5 history ['/', '/test']) //.... is supported }Copy the code

3. The compilation

Run the command:

npm run build
Copy the code

After the command completes, you can see the file structure in the dist directory:

Dist /index.html because there is a test directory that corresponds to a prerender /test route. Yes, that’s right.

Go to dist/index.html and take a look at the contents. There’s a lot more in this file than just a single

. Now the DOM structure in the body is actually the same as the DOM structure in the/path page rendered in the browser! Test /index.html is the dom structure rendered after accessing /test.

4. Verify

CD dist // Go to the corresponding directory python -m SimpleHTTPServer 8888 // take dist as the root directory and start port 8888Copy the code

2.5 the advantages and disadvantages

• optimal

  Simple, easy to use, no configuration can meet the basic SEO requirements

• Lack of

  Only H5 History is supported

  Not suitable for frequently changing pages if the page is SEO optimized. Because pre-rendering is just a snapshot like concept.

The demo address in this mode is vue-prerender-demo

3. Method 2: Use the official wheels to do THE SSR on the node

3.1 illustrates

This example only shows how to complete a relatively basic SSR, VUEX, and cache. Please refer to the official website.

Official document address: ssr.vuejs.org/zh/

The official documentation begins with “vue vs. Library version minimum requirements, why to use SSR, and compare the prerender-SPa-plugin mentioned above.”

And as follows:

This tutorial will be very in-depth and assumes that you are already familiar with vue.js itself and have decent experience with Node.js and Webpack. If you prefer a higher-level solution that provides a smooth out-of-the-box experience, you should try nuxt.js. It builds on the same Vue technology stack, but abstracts many templates and provides additional functionality, such as static site generation. However, if you need more direct control over the structure of your application, nuxt.js is not suitable for this usage scenario.

Official VUE SSR Demo: HackerNews Demo

Compared to prerender, the complexity of SSR upstart is vastly different. Follow this section to implement a basic VERSION of an SSR build configuration.

3.2 the constraint

3.3 Preparations

Initialize a project again using vue-CLI:

vue init webpack vue-ssr-demo
Copy the code

then:

cd vue-ssr-demo
npm install
npm run dev
Copy the code

Make sure the initial project works, and then start messing around

3.4 Starting to Toss

1. Install SSR support first

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

It is important that the VUe-server-renderer and vUE versions match consistently

2. Add routestestWith the page

<template>
  <div>
    Just a test page.
    <div>
      <router-link to="/">Home</router-link>
    </div>
    <div><h2>{{mode}}</h2></div>
    <div><span>{{count}}</span></div>
    <div><button @click="count++">+1</button></div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
	    mode: process.env.VUE_ENV === 'server' ? 'server' : 'client',
        count: 2
      }
    }
  }
</script>
Copy the code

In 3.srcCreate two js files under directory:

SRC ├─ entry-client.js # only run in browser ├─ entry-server.js # Only run on serverCopy the code

4. ModifyrouterConfiguration.

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) Export function createRouter () {return new Router({mode: 'history', routes: [{path: '/', name: 'Hello', component: HelloWorld }, { path: '/test', name: 'Test', component: () = > import (' @ / components/Test ') / / asynchronous components}}}Copy the code

5. Transformmain.js

The main.js initialization is only suitable for running in the browser, so we need to modify the file that can be used on both ends. Again, to avoid singleton effects, we will export a createApp factory function:

import Vue from 'vue' import App from './App' import { createRouter } from './router' export function createApp () { // Router = new createRouter() const app = new Vue({render: Return {App, router}}Copy the code

6. entry-client.jsAdd the following:

Import {createApp} from './main' const {app, router} = createApp() Router.onready (() => {app.$mount('#app')})Copy the code

7. entry-server.js

// entry-server.js import {createApp} from './main' export default context => {// Because there may be asynchronous routing hook functions or components, So we'll return a Promise, // so that the server can wait for everything to be ready before rendering. return new Promise((resolve, reject) => { const { app, Router.push (context.url) // Wait until the router has finished parsing possible asynchronous components and hook functions router.onReady(() => {const matchedComponents = router. GetMatchedComponents () / / can't match routing, perform reject function, and returns the if 404 (! matchedComponents.length) { // eslint-disable-next-line return reject({ code: 404})} // The Promise should resolve the application instance so that it can render resolve(app)}, reject)})}Copy the code

8. webpackconfiguration

├─ ├─ webpack.class.conf # ├─ Webpack.class.conf # ├─ Webpack.class.conf # ├─ Webpack.class.conf # ├─ Webpack.class.class.conf #Copy the code

9. Configure the WebPack client

Change the entry configuration of webpack.base.conf.js to./ SRC /entry-client.js. This will not affect the original dev and PROd configurations.

The server configuration also references the Base configuration, but overwrites the entry into server-entry.js by merging.

Generate the client manifest

Benefits:

1. Can be replaced if the generated file name has a hashhtml-webpack-pluginTo inject the correct resource URL.
2. When rendering bundles through WebPack’s on-demand code splitting feature, we can ensure optimized resource preloading/data prefetching of chunks and intelligent injection of the required asynchronous chunks into<script>To avoid waterfall requests from clients, and to improve TTI – time-to-interactive time.

It is easy to add a plugin to the prod configuration and add it to the plugin:

const VueSSRClientPlugin = require('vue-server-renderer/client-plugin') // ... / /... plugins: [ new webpack.DefinePlugin({ 'process.env': env, 'process.env.VUE_ENV': '"client"' // add process.env.vue_env}), //... // Also need to remove the HtmlWebpackPlugin for prod, because we have vue-ssr-client-manifest.json, // new HtmlWebpackPlugin({// filename: config.build.index, // template: 'index.html', // inject: true, // minify: { // removeComments: true, // collapseWhitespace: true, // removeAttributeQuotes: true // // more options: // // https://github.com/kangax/html-minifier#options-quick-reference // }, // // necessary to consistently work with multiple chunks via CommonsChunkPlugin // chunksSortMode: 'dependency' //}), // this plugin generates' vue-ssr-client-manifest.json 'in the output directory. New VueSSRClientPlugin()] //...Copy the code

10. Configure the WebPack server

const webpack = require('webpack') const merge = require('webpack-merge') const nodeExternals = require('webpack-node-externals') const baseConfig = require('./webpack.base.conf.js') const VueSSRServerPlugin = BaseConfig. Module. rules[1]. Options = "module.exports =" Merge (baseConfig, {// Point entry to the application's server Entry file entry: './ SRC /entry-server.js', // This allows Webpack to handle dynamic imports in a Node-appropriate fashion, // and also allows Vue component compilation, // Tell the VUe-loader to transport server-oriented code. Target: 'node', // provide source map support for bundle renderer 'source-map', // tell server bundle to use Node-style exports output: {libraryTarget: 'commonjs2' }, // https://webpack.js.org/configuration/externals/#function // https://github.com/liady/webpack-node-externals // Externalizing applications depends on modules. Make server builds faster, // and generate smaller bundles. Externals: nodeExternals({// Do not externalize dependencies that Webpack needs to process. // You can add more file types here. // You should also whitelist dependencies that modify 'global' (e.g. polyfill) whitelist: /\.css$/}), plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), 'process.env.VUE_ENV': JSON 'new VueSSRServerPlugin()]})Copy the code

Baseconfig.module.rules [1].options = "// Remove separate CSS package plug-insCopy the code

Configuration of 11.package.jsonAdded the package server build command and modified the original package command

"scripts": {
	//...
	"build:client": "node build/build.js",
    "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.conf.js --progress --hide-modules",
    "build": "rimraf dist && npm run build:client && npm run build:server"
}
Copy the code

If cross-env is not found, install NPM i-d cross-env

12. Modifyindex.html

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-ssr-demo</title> </head> <body> <! --vue-ssr-outlet--> </body> </html>Copy the code

13. Run the build command

npm run build
Copy the code

Then you can see two generated JSON files in the dist directory: vue-ssR-server-bundle. json and vue-SSR-client-manifest.json.

Both files are applied to the Node side for server-side rendering and injection of static resource files.

14. Build the server side (used by the official exampleexpress, so this demo will usekoa2Of course, it doesn’t matter whether koA or Express…)

npm i -S koa
Copy the code

const Koa = require('koa')
const app = new Koa()

// response
app.use(ctx => {
  ctx.body = 'Hello Koa'
})

app.listen(3001)
Copy the code

Write server-side code

The KOA static resource middleware needs to be installed: NPM I-d KOA-static

The server.js code looks like this:

const Koa = require('koa') const app = new Koa() const fs = require('fs') const path = require('path') const { createBundleRenderer } = require('vue-server-renderer') const resolve = file => path.resolve(__dirname, Const renderer = createBundleRenderer(require('./dist/vue- SSR -server-bundle.json'), {// runInNewContext: false, // template HTML file template: fs.readFileSync(resolve('./index.html'), 'utf-8'), // client manifest clientManifest: require('./dist/vue-ssr-client-manifest.json') }) function renderToString (context) { return new Promise((resolve, reject) => { renderer.renderToString(context, (err, html) => { err ? reject(err) : resolve(html) }) }) } app.use(require('koa-static')(resolve('./dist'))) // response app.use(async (ctx, Next) => {try {const context = {title: 'server render test ', // {{title}} url: Body = await renderToString(context) // Set the request header ctx.set(' content-type ', 'text/ HTML ') ctx.set('Server', 'Koa2 Server side render')} catch (e) { Next ()}}) app.listen(3001)Copy the code

Run the start service command:

node server.js
Copy the code

16. You’re done

3.4 the advantages and disadvantages

• optimal

  Can do real data real-time rendering, completely available for SEO spiders to crawl around

  Fully front and back end isomorphism, route configuration sharing, no longer affect server 404 requests

• Lack of

  H5 history routing mode is still supported.

  The configuration is more troublesome and the processing process is more complex (compared to the pre-rendering plug-in, too complex)

  More constraints, can not follow one’s inclinations of disorderly magnification

  This puts a lot of strain on the server, and since the browser is rendering faster, it takes up server performance to pay for it

This example git address: vue-SSR-demo

Above, to the restless heart…