美女天天操,青青青青青操爽,韩a一区,免费看日本A片,欧洲成人午夜精品无码区久久,国产国语亲子伦亲子,日韩免费片,影视先锋男人资源网

默認情況下，可以在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操作 DOM。然而，也可以將同一個組件渲染為服務(wù)器端的 HTML 字符串，將它們直接發(fā)送到瀏覽器。

簡單理解是將組件或頁面通過服務(wù)器生成 HTML 字符串，再發(fā)送到瀏覽器，最后將靜態(tài)標(biāo)記"混合"為客戶端上完全交互的應(yīng)用程序。

使用SSR的利弊

SSR的優(yōu)勢

1、更利于SEO。

不同爬蟲工作原理類似，只會爬取源碼，不會執(zhí)行網(wǎng)站的任何腳本（Google除外，據(jù)說Googlebot可以運行javaScript）。使用了React或者其它MVVM框架之后，頁面大多數(shù)DOM元素都是在客戶端根據(jù)js動態(tài)生成，可供爬蟲抓取分析的內(nèi)容大大減少(如圖一)。另外，瀏覽器爬蟲不會等待我們的數(shù)據(jù)完成之后再去抓取我們的頁面數(shù)據(jù)。服務(wù)端渲染返回給客戶端的是已經(jīng)獲取了異步數(shù)據(jù)并執(zhí)行JavaScript腳本的最終HTML，網(wǎng)絡(luò)爬中就可以抓取到完整頁面的信息。

2、更利于首屏渲染

首屏的渲染是node發(fā)送過來的html字符串，并不依賴于js文件了，這就會使用戶更快的看到頁面的內(nèi)容。尤其是針對大型單頁應(yīng)用，打包后文件體積比較大，普通客戶端渲染加載所有所需文件時間較長，首頁就會有一個很長的白屏等待時間。

SSR的局限

1、服務(wù)端壓力較大

本來是通過客戶端完成渲染，現(xiàn)在統(tǒng)一到服務(wù)端node服務(wù)去做。尤其是高并發(fā)訪問的情況，會大量占用服務(wù)端CPU資源；

2、開發(fā)條件受限

在服務(wù)端渲染中，只會執(zhí)行到componentDidMount之前的生命周期鉤子，因此項目引用的第三方的庫也不可用其它生命周期鉤子，這對引用庫的選擇產(chǎn)生了很大的限制；

3、學(xué)習(xí)成本相對較高

除了對webpack、React要熟悉，還需要掌握node、Koa2等相關(guān)技術(shù)。相對于客戶端渲染，項目構(gòu)建、部署過程更加復(fù)雜。

使用服務(wù)器端渲染 (SSR) 時還需要有一些權(quán)衡之處：

開發(fā)條件所限。瀏覽器特定的代碼，只能在某些生命周期鉤子函數(shù)中使用；一些外部擴展庫可能需要特殊處理，才能在服務(wù)器渲染應(yīng)用程序中運行。

涉及構(gòu)建設(shè)置和部署的更多要求。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序 (SPA) 不同，服務(wù)器渲染應(yīng)用程序，需要處于 Node.js server 運行環(huán)境。

更多的服務(wù)器端負載。在 Node.js 中渲染完整的應(yīng)用程序，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用 CPU 資源，因此如果你預(yù)料在高流量環(huán)境下使用，請準備相應(yīng)的服務(wù)器負載，并明智地采用緩存策略。

在對你的應(yīng)用程序使用服務(wù)器端渲染 (SSR) 之前，你應(yīng)該問的第一個問題是，是否真的需要它。這主要取決于內(nèi)容到達時間對應(yīng)用程序的重要程度。例如，如果你正在構(gòu)建一個內(nèi)部報表，初始加載時的額外幾百毫秒并不重要，這種情況下去使用服務(wù)器端渲染 (SSR) 將是一個小題大作之舉。然而，加載時間要求是絕對關(guān)鍵的指標(biāo)，在這種情況下，服務(wù)器端渲染 (SSR) 可以幫助你實現(xiàn)最佳的初始加載性能。

服務(wù)器端渲染 vs 預(yù)渲染 (SSR vs Prerendering)

如果你調(diào)研服務(wù)器端渲染 (SSR) 只是用來改善少數(shù)營銷頁面（例如 /, /about, /contact 等）的 SEO，那么你可能需要預(yù)渲染。無需使用 web 服務(wù)器實時動態(tài)編譯 HTML，而是使用預(yù)渲染方式，在構(gòu)建時 (build time) 簡單地生成針對特定路由的靜態(tài) HTML 文件。優(yōu)點是設(shè)置預(yù)渲染更簡單，并可以將你的前端作為一個完全靜態(tài)的站點。

如果你使用 webpack，你可以使用 prerender-spa-plugin 輕松地添加預(yù)渲染。

基本用法

npm install vue vue-server-renderer --save

與服務(wù)器集成

npm install express --save

const Vue = require('vue')const server = require('express')()// 第 1 步：創(chuàng)建一個 rendererconst renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {  // 第 2 步：創(chuàng)建一個 Vue 實例  const app = new Vue({    data: {      url: req.url    },    template: `<div>訪問的 URL 是：{{ url }}</div>`  })  // 第 3 步：將 Vue 實例渲染為 HTML  renderer.renderToString(app, (err, html) => {    if (err) {      res.status(500).end('Internal Server Error')      return    }    res.end(`      <!DOCTYPE html>      <html lang="en">        <head><title>Hello</title></head>        <body>${html}</body>      </html>    `)  })})
server.listen(8080)

在 Node.js 服務(wù)器中使用時相當(dāng)簡單直接。

Vue.js 服務(wù)器端渲染指南

SSR的優(yōu)勢

SSR的局限

基本用法