详解如何使用Vue2做服务端渲染(2)

上面是vue2.0的服务端渲染方式，用流式渲染的方式，将HTML一边生成一边写入相应流，而不是在最后一次全部写入。这样的效果就是页面渲染速度将会很快。还可以引入 lru-cache 这个模块对数据进行缓存，并设置缓存时间，我一般设置15分钟的缓存时间。

可以参考vue ssr 官方演示项目的服务端实现 https://github.com/vuejs/vue-hackernews-2.0/blob/master/server.js

axios在客户端和服务端的使用

创建2个文件用于客户端和服务端的的通信

create-api-client.js 文件(用于客户端)

const axios = require('axios'); let api; axios.defaults.timeout = 10000; axios.interceptors.response.use((res) => { if (res.status >= 200 && res.status < 300) { return res; } return Promise.reject(res); }, (error) => { // 网络异常 return Promise.reject({message: '网络异常，请刷新重试', err: error}); }); if (process.__API__) { api = process.__API__; } else { api = { get: function(target, params = {}) { const suffix = Object.keys(params).map(name => { return `${name}=${JSON.stringify(params[name])}`; }).join('&'); const urls = `${target}?${suffix}`; return new Promise((resolve, reject) => { axios.get(urls, params).then(res => { resolve(res.data); }).catch((error) => { reject(error); }); }); }, post: function(target, options = {}) { return new Promise((resolve, reject) => { axios.post(target, options).then(res => { resolve(res.data); }).catch((error) => { reject(error); }); }); } }; } module.exports = api;

create-api-server.js 文件(用于服务端)

const isProd = process.env.NODE_ENV === 'production'; const axios = require('axios'); let host = isProd ? 'http://yczj.api.autohome.com.cn' : 'http://t.yczj.api.autohome.com.cn'; let cook = process.__COOKIE__ || ''; let api; axios.defaults.baseURL = host; axios.defaults.timeout = 10000; axios.interceptors.response.use((res) => { if (res.status >= 200 && res.status < 300) { return res; } return Promise.reject(res); }, (error) => { // 网络异常 return Promise.reject({message: '网络异常，请刷新重试', err: error, type: 1}); }); if (process.__API__) { api = process.__API__; } else { api = { get: function(target, options = {}) { return new Promise((resolve, reject) => { axios.request({ url: target, method: 'get', headers: { 'Cookie': cook }, params: options }).then(res => { resolve(res.data); }).catch((error) => { reject(error); }); }); }, post: function(target, options = {}) { return new Promise((resolve, reject) => { axios.request({ url: target, method: 'post', headers: { 'Cookie': cook }, params: options }).then(res => { resolve(res.data); }).catch((error) => { reject(error); }); }); } }; } module.exports = api;

由于在服务端，接口不会主动携带 cookie，所以需要在headers里写入cookie。由于接口数据经常发生变化，所以没有做缓存。