1 什么是服務(wù)端渲染 SSR
目前創(chuàng)新互聯(lián)已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機、網(wǎng)站托管運營、企業(yè)網(wǎng)站設(shè)計、關(guān)嶺網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
server side render
就是通過后端吐模板，而不是通過前端ajax獲取數(shù)據(jù)，拼接字符串。
2 為什么需要SSR
需要SEO，因為爬蟲不會等待ajax結(jié)果。
客戶端網(wǎng)絡(luò)慢，加載速度慢，影響用戶體驗。
3 另一種解決辦法 預(yù)渲染
不是一次性下載整個單頁應(yīng)用，預(yù)渲染只是在構(gòu)建時為了特定的路由生成特定的幾個靜態(tài)頁面
你用webpack可以很簡單地通過prerender-spa-plugin來添加預(yù)渲染
4 NodeJS編寫Vue的SSR
首先npm install --save-dev的有 vue express vue-server-renderer
重慶分公司
重慶分公司
// server.js
'use strict';
var fs = require('fs');
var path = require('path');
global.Vue = require('vue')
var layout = fs.readFileSync('./index.html', 'utf8')
var renderer = require('vue-server-renderer').createRenderer()
var express = require('express')
var server = express()
server.use('/assets',express.static(
path.resolve(__dirname,'assets')
))
server.get('*',function(req, res){
// 將Vue實例渲染成HTML
renderer.renderToString(
// 創(chuàng)建一個應(yīng)用實例
require('./assets/app')(),
// 處理渲染結(jié)果
function(error, html){
if(error){
console.error(error);
return res
.status(500)
.send('Server Error')
}
// 發(fā)送布局和HTML文件
res.send(layout.replace('', html))
}
)
})
server.listen(5000, function(error){
if(error) throw errorr;
console.log('Server is running at localhost:5000')
})
// index.htmlDocument
// assets/app.js
(function() {
'use strict'
var createApp = function() {
return new Vue({
template: '你已經(jīng)在這花了 {{ counter }} 秒。',
data: {
counter: 0
},
created: function() {
var vm = this;
setInterval(function(){
vm.counter += 1;
},1000)
}
})
}
// 暴露接口
if(typeof module !== 'undefined' && module.exports) {
module.exports = createApp
} else {
this.app = createApp()
}
}).call(this)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
