亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue SSR 服務(wù)端渲染記錄

villainhr / 3547人閱讀

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

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

服務(wù)端渲染是什么

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

服務(wù)端渲染優(yōu)點

頁面的SEO, 異步拿數(shù)據(jù)顯示對爬蟲不友好

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

服務(wù)端渲染原理

接下來，介紹下vue 服務(wù)端實現(xiàn)原理及流程。

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

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

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

用白話形容，服務(wù)端獲取頁面所需的數(shù)據(jù)之后，拼出html，把html轉(zhuǎn)成string發(fā)送到前端，前端把html插入到指定節(jié)點，渲染頁面，OK了。

服務(wù)端數(shù)據(jù)預(yù)取

看看官網(wǎng)的demo,服務(wù)端怎么做的服務(wù)端數(shù)據(jù)預(yù)取。

// 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 將可能的異步組件和鉤子函數(shù)解析完
    router.onReady(() => {
      //獲取相匹配的組件
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }
      // 對所有匹配的路由組件調(diào)用 `asyncData()`
      Promise.all(matchedComponents.map(Component => {
        if (Component.asyncData) {
          return Component.asyncData({
            store,
            route: router.currentRoute
          })
        }
      })).then(() => {
        // 在所有預(yù)取鉤子(preFetch hook) resolve 后，
        // 我們的 store 現(xiàn)在已經(jīng)填充入渲染應(yīng)用程序所需的狀態(tài)。
        // 當(dāng)我們將狀態(tài)附加到上下文，
        // 并且 `template` 選項用于 renderer 時，
        // 狀態(tài)將自動序列化為 `window.__INITIAL_STATE__`，并注入 HTML。
        context.state = store.state
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

根據(jù)router拿出相匹配的組件，客戶端定義asyncData（數(shù)據(jù)預(yù)取函數(shù)，拿數(shù)據(jù)），服務(wù)端asyncData，獲取數(shù)據(jù)

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

bundleRenderder

html渲染好之后，轉(zhuǎn)成string發(fā)到客戶端，客戶端插入到對應(yīng)DOM節(jié)點下就可以啦～

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/90200.html

相關(guān)文章

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

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

    liangdas 評論0 收藏0

  • vue服務(wù)端渲染demo將vue-cli生成的項目轉(zhuǎn)為ssr

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

    whinc 評論0 收藏0

  • 理解vue ssr原理，自己搭建簡單的ssr框架

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

    Riddler 評論0 收藏0

  • 從零開始搭建一個vue-ssr（上）

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

    Winer 評論0 收藏0

  • Vue.js SSR 內(nèi)容總結(jié)

    摘要：本文只是對官方文檔和對官方的個人學(xué)習(xí)總結(jié)，說得不夠完整的請見諒本文主要對以下幾方面內(nèi)容對的內(nèi)容進行分析總結(jié)出現(xiàn)的原因的總體原理當(dāng)中的數(shù)據(jù)預(yù)取在編寫代碼時候的限制的構(gòu)建原理出現(xiàn)的原因單頁應(yīng)用有一個很大的缺點就是問題，搜索引擎目前只能對同步的進 本文只是對Vue.js官方SSR文檔和對官方hackernews demo的個人學(xué)習(xí)總結(jié)，說得不夠完整的請見諒 本文主要對以下幾方面內(nèi)容對Vue....

    曹金海 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<