SSR伺服器端渲染技術(一)

阿新 • • 發佈：2019-02-03

先引包

var http =require('http');
var Vue = require('vue')
var serverRender = require('vue-server-renderer')

//步驟1 建立vue例項

var app = new Vue({
    template:`<div>
        <my-component/>
    </div>`,
    components:{
        myComponent:{
            template:'<div>vvvvvvvvvvvvvvv</div>'
        }
    }
})

//步驟2 建立renderer例項

var renderer = serverRender.createRenderer()

//步驟3 將vue例項轉化為 html字串

renderer.renderToString(app,function(err,html){
    console.log(html)
})

此時輸出的結果為（這裡只是展示可以轉字串）

[email protected] MINGW64 /e/www/WWWWWW/ssrDemo
$ node demo.js
<div data-server-rendered="true"><div>vvvvvvvvvvvvvvv</div></div>

//步驟4 將VUE例項的字串輸出到伺服器

//步驟4  將VUE例項的字串輸出到伺服器
http.createServer((req,res)=>{  
    //步驟3  將vue例項轉化為 html字串
    renderer.renderToString(app,function(err,html){
        console.log(html)
        res.end(`<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
        </head>
        <body>
            ${html}
            <div>wowoow</div>
        </body>
        </html>`)
    })   
}).listen(3000);

完整例子程式碼如下：

var http =require('http');
var Vue = require('vue')
var serverRender = require('vue-server-renderer')

//步驟1 建立vue例項
var app = new Vue({
    template:`<div>
        <my-component/>
    </div>`,
    components:{
        myComponent:{
            template:'<div>vue例項</div>'
        }
    }
})
//步驟2 建立renderer例項
var renderer = serverRender.createRenderer()


//步驟4  將VUE例項的字串輸出到伺服器
http.createServer((req,res)=>{  
    //步驟3  將vue例項轉化為 html字串
    renderer.renderToString(app,function(err,html){
        console.log(html)
        res.end(`<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
        </head>
        <body>
            ${html}
            <div>wowoow</div>
        </body>
        </html>`)
    })   
}).listen(3000);

這樣把字串都放在node裡面不是很好，所以把template 寫出去。

-------------------------------------------------------------------------------------------------------------

createrender 裡面可以通過FS模組讀取template 模版，那麼我們可以新建一個html來存放之前的template,

//步驟2 建立renderer例項
var renderer = serverRender.createRenderer({
    template:require('fs').readFileSync('./index.template.html','utf-8')
})


//步驟4  將VUE例項的字串輸出到伺服器
http.createServer((req,res)=>{  
    //步驟3  將vue例項轉化為 html字串
    renderer.renderToString(app,function(err,html){
        console.log(html)
        res.end(html)
    })   
}).listen(3000);

template 程式碼如下需要注意的是要新增一個  這個是表示vue例項裡面的東西可以插入到這個地方

中間不要寫空格，否則報錯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--vue-ssr-outlet-->
</body>
</html>

----------------------------------------------------------------------------------------------------------------------

renderer.renderToString 中第2個引數可以在模版裡面init 進去你要新增的標籤如下

我init進入了script標籤

//步驟4  將VUE例項的字串輸出到伺服器
http.createServer((req,res)=>{  
    //步驟3  將vue例項轉化為 html字串
    renderer.renderToString(app,{
        init:`<script> console.log('aaaa') </script>`
    },function(err,html){
        console.log(html)
        res.end(html)
    })   
}).listen(3000);

在template模版中加了｛｛｝｝和｛｛｛｝｝｝ 2個括號和3個括號

其中2個括號就會轉譯成字串 3個括號直接執行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    {{init}}
    {{{init}}}
    <!--vue-ssr-outlet-->
</body>
</html>

完整程式碼那個index.template.html 模版我就不復制了，如上

var http =require('http');
var Vue = require('vue')
var serverRender = require('vue-server-renderer')

//步驟1 建立vue例項
var app = new Vue({
    template:`<div>
        <my-component/>
    </div>`,
    components:{
        myComponent:{
            template:'<div>vue例項</div>'
        }
    }
})
//步驟2 建立renderer例項
var renderer = serverRender.createRenderer({
    template:require('fs').readFileSync('./index.template.html','utf-8')
})


//步驟4  將VUE例項的字串輸出到伺服器
http.createServer((req,res)=>{  
    //步驟3  將vue例項轉化為 html字串
    renderer.renderToString(app,{
        init:`<script> console.log('aaaa') </script>`
    },function(err,html){
        console.log(html)
        res.end(html)
    })   
}).listen(3000);

SSR伺服器端渲染技術(一)

先引包 var http =require('http'); var Vue = require('vue') var serverRender = require('vue-server-renderer') //步驟1 建立vue例項 var app = new V

自己動手搭建react-ssr伺服器端渲染專案架構

最近折騰了下React的ssr專案的搭建，之前折騰過一次沒有太多的進展。這次重新開始搭建react的專案架構。專案原始碼：https://github.com/rt-zhangxuefei/react-ssr-template 特別感謝：慕課網的Delllee的課程。這裡我使用了saga代替thunk，

VUE SSR伺服器端渲染NUXT採坑總結

初始化建立專案 yarn create nuxt-app <專案名> css預編譯安裝 yarn add node-sass scss-loader sass-loader --save-dev 路由管理在nuxt中路由已經被整合到框架中，所以不需要再單獨引入配置，而且當頁面檔案建立後， ro

配置Vue伺服器端渲染SSR(一)

閱讀前為什麼使用伺服器渲染?

細說後端模板渲染、客戶端渲染、node 中間層、伺服器端渲染（ssr）

前端與後端渲染方式的發展大致經歷了這樣幾個階段：後端模板渲染、客戶端渲染、node 中間層、伺服器端渲染（ssr）。 1. 後端模板渲染前端與後端最初的渲染方式是後端模板渲染，就是由後端使用模板引擎渲染好 html 後，返回給前端，前端再用 js 去操作 dom 或者渲染其他動態的部分。這個過程大致分成以

基於vue現有專案的伺服器端渲染SSR改造

前面的話　　不論是官網教程，還是官方DEMO，都是從0開始的服務端渲染配置。對於現有專案的伺服器端渲染SSR改造，特別是基於vue cli生成的專案，沒有特別提及。本文就小火柴的前端小站這個前臺專案進行SSR改造效果概述【定義】　　伺服器渲染的Vue應用程式被認為是"同構"

用prerender-spa-plugin插件Vue項目優化SEO做ssr服務端渲染及預渲染

優先 plugin npm color target ins sset 對比 col 　　今天在做公交的時候沒幹，用手機看看文章，偶然發現了一個關於Vue優化seo的文章，我先是在Vue的官方文檔看了一篇關於Vue做SEO優化的文章。　　上面提到了nuxt.js這個框架，

Vue SSR服務端渲染之資料快取

當我們在做vue的伺服器端渲染時，可能會碰到各種各樣的坑，記憶體洩露就是其中的一種。當然，導致記憶體洩露的原因有很多，不合理使用Axios也是其中一種，那下面我給大家介紹一下如何有效的避免請求中的記憶體洩露。 1. 安裝快取依賴: lru-cache npm install lru-cach

render()函式進行伺服器端渲染(詳細)

使用 Express 做服務端框架的時候，如果選擇一種類似於 EJS這種模板引擎渲染前端頁面的時候，經常服務端在響應 http 請求的時候呼叫 res.render({options}) 去向模板中渲染資料, 可以把檢視響應給客戶端. 框架怎麼來的？安裝package.json

nuxt中-axios跨域- 伺服器端渲染

今天在做專案中，遇到一個問題，在一個點選事件中利用axios發請求，出現了跨域問題，之前都是直接用的伺服器端渲染，然後就一直沒出現，還是解決了很久的，所以決定把問題及解決方案記錄下來。 tree.vue : &nb

CentOs nginx部署nuxt ssr服務端渲染

一、初始化服務安裝基本環境工具 yum -y install gcc gcc-c++ autoconf pcre-devel make automake yum -y install wget httpd-tools vim 二、安裝node/npm 1、到

VUE基於NUXT的SSR 服務端渲染

Server Side Rendering（服務端渲染） SSR 目的是為了解決單頁面應用的 SEO 的問題，對於一般網站影響不大，但是對於論壇類，內容類網站來說是致命的，搜尋引擎無法抓取頁面相關內容，也就是使用者搜不到此網站的相關資訊。原理將 html 在服務端渲染，合成完

Android之ListView分頁獲取網路資料（伺服器端）（一）

資料庫分頁： mysql：select pname from product limit 0,2;第一個引數是指要開始的地方，第二個引數是指每頁顯示多少條資料；注意：第一頁用0表示。 oracle：rownumber SqlServer：top 一、伺服器端 ①新建包com

React: Server-Side Rendering React伺服器端渲染教程 Lynda課程中文字幕

React: Server-Side Rendering 中文字幕 React伺服器端渲染中文字幕React: Server-Side Rendering 伺服器端渲染使您可以根據網路和裝置情況優化應用程式以使用客戶端或伺服器資源在慢速網路上的舊裝置？在伺服器上呈現新裝置，

React-AMD標準、動態載入資源的Web APP如何做伺服器端渲染

背景介紹需要做伺服器端渲染的app是：可以點選新增元件，儲存以後生成一個獨立的web app。就是一個生成web app的web app。因為不一定每個元件都被新增到使用者建立的web app中，所以，元件的資源是動態載入的，只有選擇某個元件的時候，才會去載

HttpSession伺服器端會話技術

J2EE中的HttpSession總結： ①什麼是session？ session是伺服器端技術，利用這個技術，伺服器在執行時可以為每一個瀏覽器建立一個共享的session物件，由於 session為

汽車VIN碼，車架號，移動端，伺服器端識別技術

很多人在購買車輛的時候，只關注效能、外觀、內飾等，其實真正的內行是首先看車輛的VIN碼，也叫車架號碼。 VIN碼（車架號碼）是一輛車的唯一身份證明，一般在車輛的擋風玻璃處，有的在車輛防火牆上，或B柱銘牌上。按照國際SAE國際規定，VIN碼（車架號碼）由17位字元組成，其中包

vue2 ssr 服務端渲染入門demo

('*', (req, res) => { const app = new Vue({ //data資料供下面的template模板渲染使用 data: { url: req.url, data: mockdata,

使用 PHP 來做 Vue.js 的 SSR 服務端渲染

對於客戶端應用來說，服務端渲染是一個熱門話題。然而不幸的是，這並不是一件容易的事，尤其是對於不用 Node.js 環境開發的人來說。讓我們一起來仔細研究一些服務端渲染的概念，權衡優缺點，然後遵循第一法則用 PHP 建立一個服務端渲染。什麼是服

React伺服器端渲染框架next.js專案實戰及部署上下文context問題解決辦法

在前段時間折騰過搭建react伺服器端專案架構，點選這裡瞭解下，正好最近有個重構PC網站的需求，考慮SEO等因素。在做技術選型的時候決定採用nextjs。專案開發過程中，nextjs的體驗非常棒，個人覺得比create-react-app開發體驗還要好，特別是HMR功能，雖然都有這個功能，但是nextjs

SSR伺服器端渲染技術(一)

相關推薦