vue 伺服器渲染

2021-09-14 00:47:29 字數 770 閱讀 8105

vue 伺服器渲染

作用:可以加快首屏渲染速度。

有利於搜尋引擎的seo。

自己的粗淺理解:

node端和瀏覽器端都能執行js。當開啟瀏覽器, 輸入專案位址,首先訪問node伺服器,node伺服器渲染 出來返回到瀏覽器的 只有html文件 和相應的js、css注入,還有node端從api伺服器端獲取的資料, 一般放在全域性的變數裡。列window.vuestore = api伺服器資料。然後在瀏覽器端, 當vue 根例項第一次初始化的時候,把資料注入到全域性狀態管理 vuex裡。作為瀏覽器端相應路由裡的資料,給路由級元件 提供 相應的資料狀態,然後渲染出相應的虛擬dom, 同時復用node端 返回的已生成的dom節點。因為例如戶端渲染的虛擬dom == node端渲染返回的的dom節點。此後瀏覽器端行為 與node端幾乎不再相關。

做到兩端對路由響應的統一,兩端 需要 對同乙個路由 響應同樣的函式, 如尤大官網上 asyncdata,你也可以指定 其他的函式。node端當進入路由 就會解析 配備當前路由的路由元件,然後 把他們(asyncdata) 都 找出來, 放在promise.all 裡面,等拉去api 伺服器端的資料獲取完後, 放入全域性狀態管理 vuex裡面。瀏覽器端 一種實現就是路由hook 裡 beforeresolve 裡面 完成類似 node端獲取資料的方式, 第二種是在路由元件裡的 beforemounted 裡面去觸發路由元件的this.$options.asyncdata.詳細介紹(尤大官方文件)

開發移動端專案 提供自己改良的nuxt

nuxt官方文件

vue專案優化,加快伺服器端渲染速度

1.css在開發模式中用import,在打包後用cdn min.js中做如下操作 if process.env.node env development index.html中引入相應ui的cdn 2.減少vendor.js的體積 2.1 提取js到外部,減小vendor.js體積 1.在 buil...

伺服器端渲染基礎

客戶端渲染 現代化的服務端渲染 優點 1.1 使用者體驗好 1.2 開發效率高 1.3渲染效能好 1.4可維護性好 缺點2.1 首屏渲染時間長 與傳統伺服器端渲染直接獲取服務端直接渲染好的html不同,單頁面應用使用js在客戶端生成html來呈現網頁內容,使用者需要等待客戶端js解析執行完才能看到頁...

react 伺服器端渲染

伺服器端渲染 vs 客戶端渲染 1.伺服器端渲染需要消耗更多的伺服器資源 cpu,記憶體等 2.客戶端渲染可以將靜態資源部署到cdn上,實現高併發 3.服務端渲染對seo更友好 react 伺服器端渲染的實現 1.構建編譯與執行環境 安裝 babel node npm install babel c...