简单实现服务器端渲染

服务端渲染的实现，通常有3种方式，第1种是手动进行项目的简单搭建，第2种是使用vue CLI 3脚手架进行搭建，第3种利用一些成熟框架来搭建(如Nuxt,js），本节讲解第1种和第2种方式，带领读者实现简单的服务器端渲染。

1.创建 vue-ssr项目

在C:\vue\chapter08目录中，使用命令行工具创建一个vue-ssr项目，具体命令如下:

mkdir vue-ssr

cd vue-ssr

npm init  -y

执行上述命令后，会在vue-ssr 目录下生成一个package.json文件。

在Vue中使用服务器端渲染，需要借助Vue的扩展模块vue-server-renderer。下面我们在vue-ssr项目中使用npm来安装vue-server-renderer,具体命令如下:

npm install vue@2.6.x vue-server-renderer@2.6.X --save

vue-server-renderer是Vue中处理服务器加载的一个模块,给Vue提供在Node.js服务器端渲染的功能。vue-server-renderer依赖-些Node.js原生模块，所以目前只能在Node.js中使用。

2.Vue渲染

将vue-server-renderer安装完成后，创建服务器脚本文件test.js,实现将Vue实例的渲染结果输出到控制台中，具体代码如下:

 //①创建一个Vue实例

 const Vue = require('vue')

  const app = new Vue({

template: '<div>SSR 的简单使用</div>'
//② 创建一个renderer实例
const renderer = require ('vue-server-renderer').createRendere()

//③将Vue实例渲染为HTML

renderer.renderToString(app, (err, html) => {

if (err) {

throw err
}

console.log(html)

})

在命令行中执行node test.js,运行结果如下所示:

<div data-server-rendered="true">SSR的简单使用</div>

从上述结果可以看出，在<div>标签中添加了一个特殊的属性data-server-rendered,该属性是告诉客户端的Vue这个标签是由服务器渲染的。

浏览器渲染页面的顺序：页面渲染的过程介绍

HTML从浏览器地址栏输入URL到显示页面的步骤

移动端web页面如何定义和使用初始化样式？

黑马程序员web前端高级软件工程师培训