vue SSR 服務端渲染記錄

villainhr 發布于2019-08-21 17:55 / 3480人閱讀

摘要：前幾天了解了下服務端渲染的流程，記錄下。現在我們的服務器與應用程序已經解耦處理異常服務端渲染一些坑對象找不到，由于前端使用的，在環境不存在數據預獲取時，組件尚未實例化無法使用，數據請求及格式化等操作都應該放置在處理

前幾天了解了下vue 服務端渲染的流程，記錄下。首先，什么是ssr(服務端渲染 Server Side Rendering)，為什么需要？

服務端渲染是什么

前后端分離之后，頁面加載的流程是，前端異步請求拿到數據渲染頁面。服務端渲染就是在后端把數據取好，拼好頁面的DOM樹發給前端，到瀏覽器解析渲染。有沒有想到前后端分離之前，由后端把數據塞進模版，前端負責顯示的過去。（有沒有種天下之勢，合久必分，分久必合的感慨哈哈哈哈哈)

服務端渲染優點

頁面的SEO, 異步拿數據顯示對爬蟲不友好

首屏渲染速度快，更好的用戶體驗

服務端渲染原理

接下來，介紹下vue 服務端實現原理及流程。

SSR 有兩個入口文件client-entry，server-entry , webpack打包之后，生成 server-bundle, client-bundle

服務器收到瀏覽器的請求，創建一個bundleRenderer,讀取1生成的server-bundle，執行代碼（具體做了什么后面會講到），生成html發送到前端

把第二步生成的html跟前端的client-bundle進行混合（hydrate），混合時判斷client-bundle 的DOM節點跟服務端返回的html里DOM節點是否相同，是的話掛載（vue中的$mount）到這個節點上，頁面渲染完畢

用白話形容，服務端獲取頁面所需的數據之后，拼出html，把html轉成string發送到前端，前端把html插入到指定節點，渲染頁面，OK了。

服務端數據預取

看看官網的demo,服務端怎么做的服務端數據預取。

// entry-server.js
import { createApp } from "./app"
export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()
    router.push(context.url)
     // 等到 router 將可能的異步組件和鉤子函數解析完
    router.onReady(() => {
      //獲取相匹配的組件
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }
      // 對所有匹配的路由組件調用 `asyncData()`
      Promise.all(matchedComponents.map(Component => {
        if (Component.asyncData) {
          return Component.asyncData({
            store,
            route: router.currentRoute
          })
        }
      })).then(() => {
        // 在所有預取鉤子(preFetch hook) resolve 后，
        // 我們的 store 現在已經填充入渲染應用程序所需的狀態。
        // 當我們將狀態附加到上下文，
        // 并且 `template` 選項用于 renderer 時，
        // 狀態將自動序列化為 `window.__INITIAL_STATE__`，并注入 HTML。
        context.state = store.state
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

根據router拿出相匹配的組件，客戶端定義asyncData（數據預取函數，拿數據），服務端asyncData，獲取數據

把源數據和狀態寫進store（數據和狀態存儲容器，store獨立于業務組件，詳情可查看Vuex），避免客戶端和服務端狀態不對等。狀態寫進window.__INITIAL_STATE__格式，客戶端可拿到

bundleRenderder

html渲染好之后，轉成string發到客戶端，客戶端插入到對應DOM節點下就可以啦～

const { createBundleRenderer } = require("vue-server-renderer")
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false, // 推薦
  template, // （可選）頁面模板
  clientManifest // （可選）客戶端構建 manifest
})
// 在服務器處理函數中……
server.get("*", (req, res) => {
  const context = { url: req.url }
  // 這里無需傳入一個應用程序，因為在執行 bundle 時已經自動創建過。
  // 現在我們的服務器與應用程序已經解耦！
  renderer.renderToString(context, (err, html) => {
    // 處理異常……
    res.end(html)
  })
}

服務端渲染一些坑

document 對象找不到，由于前端使用的 window，在 node 環境不存在

數據預獲取時，組件尚未實例化（無法使用 this ），數據請求及格式化等操作都應該放置在store處理

云服務器 GPU云服務器 vue條件渲染服務端渲染網頁端webrtc視頻渲染網頁端3d云渲染

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90200.html

手把手教你搭建SSR(vue/vue-cli + express)

摘要：最近簡單的研究了一下，對已經有了一個簡單的認知，主要應用于單頁面應用，是很不錯的框架。創建好之后，在命令行直接輸入即可，當控制臺顯示服務已啟動則表示該服務已經啟動成功了。配置參數中有一項為這項配置的就是我們即將使用的模板。最近簡單的研究了一下SSR，對SSR已經有了一個簡單的認知，主要應用于單頁面應用，Nuxt是SSR很不錯的框架。也有過調研，簡單的用了一下，感覺還是很不錯。但是還是...

liangdas 2019-08-23 18:05 評論0 收藏0
vue服務端渲染demo將vue-cli生成的項目轉為ssr

摘要：無需使用服務器實時動態編譯，而是使用預渲染方式，在構建時簡單地生成針對特定路由的靜態文件。與可以部署在任何靜態文件服務器上的完全靜態單頁面應用程序不同，服務器渲染應用程序，需要處于運行環境。更多的服務器端負載。目錄結構 -no-ssr-demo 未做ssr之前的項目代碼用于對比 -vuecli2ssr 將vuecli生成的項目轉為ssr -prerender-demo 使用prer...

whinc 2019-08-22 16:07 評論0 收藏0
理解vue ssr原理，自己搭建簡單的ssr框架

摘要：前言大多數項目要支持應該是為了考慮，畢竟對于應用來說，搜索引擎是一個很大的流量入口。引入是一個構建客戶端應用的框架，即組件是在瀏覽器中進行渲染的。由于服務端渲染要用做中間層，所以部署項目時，需要處于運行環境。前言大多數Vue項目要支持SSR應該是為了SEO考慮，畢竟對于WEB應用來說，搜索引擎是一個很大的流量入口。Vue SSR現在已經比較成熟了，但是如果是把一個SPA應用改造成S...

Riddler 2019-08-23 14:13 評論0 收藏0
從零開始搭建一個vue-ssr（上）

摘要：從零開始搭建一個背景是什么全拼是，服務端渲染。大家不妨可以打開一些頁面或者一些公司的網站，查看源代碼，你會發現，也是有這個標記。這時候，我們發現頁面的路由切換生效了，并且不同頁面的源代碼也不一樣了。從零開始搭建一個下項目源碼從零開始搭建一個vue-ssr 背景 What?SSR是什么？ SSR全拼是Server-Side Rendering，服務端渲染。所謂服務端渲染，指的是把...

Winer 2019-08-23 18:23 評論0 收藏0
Vue.js SSR 內容總結

摘要：本文只是對官方文檔和對官方的個人學習總結，說得不夠完整的請見諒本文主要對以下幾方面內容對的內容進行分析總結出現的原因的總體原理當中的數據預取在編寫代碼時候的限制的構建原理出現的原因單頁應用有一個很大的缺點就是問題，搜索引擎目前只能對同步的進本文只是對Vue.js官方SSR文檔和對官方hackernews demo的個人學習總結，說得不夠完整的請見諒本文主要對以下幾方面內容對Vue....

曹金海 2019-08-23 18:25 評論0 收藏0