vue-ssr的使用方法

## 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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章