## vue的ssr有什麼優勢
- ssr 服務端渲染 (頁面在服務端渲染後 返回給前端)
- spa 頁面 <div id="app">
- 多頁應用有利於seo優化的 原生開發頁面 很多html
- vue-server-render vue實現了可以在node中解析vue 實現將實例渲染成一個字符串
- 預渲染(啓動一個瀏覽器 生成html,加載這個頁面的時候先顯示html進行替換,適合靜態頁面)。
- 服務端渲染(更好)
## ssr的缺陷
- 1.ssr會佔用很多服務器內存(緩存)
- 2.瀏覽器一些api無法使用了 beforeCreate created()
- 頁面渲染完之後發起ajax請求數據,用請求來的數據渲染頁面
- js很大,首屏白屏問題,服務端渲染,在後臺請求數據,比前端更快
數據只用用戶渲染,可以減少白屏時間
- 通過一份代碼 打包出兩份代碼,-> 用node渲染打包結果--》字符串(沒有交互能力),再把另一份打包的結果插入到頁面中。
- cnpm install vue vue-server-renderer koa @koa/router
const Vue=require('vue');
const VueServerRenderer=require('vue-server-renderer');
const koa=require('koa');
const Router=require('@koa/router');
const fs=require('fs');
let app=new koa();
let router=new Router();
let vm=new Vue({
data(){
return{
name:'jim'
}
},
template:`<div> hello {{name}}</div>`
})
const template=fs.readFileSync('./temp.html','utf-8');
let render=VueServerRenderer.createRenderer({
template
});
router.get('/',async (ctx)=>{ //裏面包含瀏覽器和服務端的req和res的一些信息
ctx.body=await render.renderToString(vm);
});
app.use(router.routes());
app.listen(3000)
//nodemon node的monitor node的監視器
// npm install nodemon -g