當前位置：首頁 > 前端技术 > vue >内容正文

vue

了解 Vue SSR 这一篇足以

發(fā)布時間：2023/12/13 vue 29 豆豆

生活随笔收集整理的這篇文章主要介紹了了解 Vue SSR 这一篇足以小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

文章目錄

- 1 - 什么是服務(wù)器端渲染？
- - 1.1 新建server文件夾
  - 1.2 生成一個node項目
  - 1.3 安裝express
  - 1.4 服務(wù)端渲染小案例
  - 1.5 運行查看效果
  - 1.6 打開瀏覽器
  - 1.7 右鍵查看源代碼
- 2 - 什么是客戶端渲染？
- - 2.1 新建client文件夾
  - 2.2 生成一個vue項目
  - 2.3 安裝依賴并啟動
  - 2.4 瀏覽器查看效果
  - 2.5 查看源代碼
- 3 - 客戶端渲染vs服務(wù)端渲染
- - 3.1 運行架構(gòu)對比
  - 3.2 開發(fā)模式對比
  - 3.3 特點優(yōu)勢總結(jié)
- 4 - vue框架中的服務(wù)端渲染
- - 4.1 新建vue-ssr文件夾
  - 4.2 把server文件夾中的文件拷貝進來
  - 4.3 安裝必要依賴
  - 4.4 vue服務(wù)端渲染最小demo
  - 4.5 瀏覽器訪問
  - 4.6 查看源代碼
  - 4.7 遺留問題
- 5 - 理解同構(gòu)理念
- 6 - Nuxt.js框架使用
- - 1. 使用nuxt.js創(chuàng)建一個ssr項目
  - 2. 啟動項目
  - 3. 查看源代碼
  - 4. 搭建首頁
  - 5. 異步數(shù)據(jù)獲取
  - - 1. 認識asyncData方法
    - 2. 獲取文章列表（移動端項目）
    - 3. 渲染接口數(shù)據(jù)
    - 4. 預(yù)覽效果并查看源代碼
- 7- 總結(jié)
- - 7.1 服務(wù)端渲染和客戶端渲染各自指什么？有什么特點？
  - 7.2 同構(gòu)的本質(zhì)是什么？
  - 7.3 Nuxt.js中如何實現(xiàn)異步數(shù)據(jù)獲取（asyncData方法）？

1 - 什么是服務(wù)器端渲染？

server side render 前端頁面的產(chǎn)生是由服務(wù)器端生成的，我們就稱之為服務(wù)端渲染

1.1 新建server文件夾

server

1.2 生成一個node項目

npm init -y

1.3 安裝express

express 官方文檔

npm install express --save

1.4 服務(wù)端渲染小案例

app.js

const express = require('express') const app = express() const port = 3000 // 當路徑為跟路徑,返回完整的html片段 app.get('/', (req, res) => res.send(`<html><body><h1>hi,hello</h1></body></html> `))app.listen(port, () => console.log(`Example app listening on port ${port}!`))

1.5 運行查看效果

node app.js

1.6 打開瀏覽器

http://localhost:3000

1.7 右鍵查看源代碼

總結(jié)：所謂的服務(wù)端渲染值得是頁面的內(nèi)容完全是由服務(wù)端側(cè)決定到底要展示出什么內(nèi)容

2 - 什么是客戶端渲染？

client side render 服務(wù)端只提供json格式的數(shù)據(jù)，渲染成什么樣子由客戶端通過js控制

通過vite快速創(chuàng)建一個基于vue框架的客戶端渲染樣例

2.1 新建client文件夾

client

2.2 生成一個vue項目

我們使用vite工具快速生成一個vue項目，https://vitejs.dev/

npm init @vitejs/app client-vue-app --template vue

2.3 安裝依賴并啟動

cd vue-app npm install (or `yarn`) npm run dev (or `yarn dev`)

2.4 瀏覽器查看效果

http://localhost:8080

2.5 查看源代碼

結(jié)論：通過查看源代碼我們發(fā)現(xiàn)，源代碼并沒有顯示我們頁面中實際渲染的內(nèi)容，我們只看到一個main.js文件，和一個id為app的根元素，所以我們知道網(wǎng)頁內(nèi)容是通過js來動態(tài)的進行渲染的，js運行在瀏覽器，瀏覽器也就是客戶端，這種由瀏覽器端的js做主導(dǎo)渲染網(wǎng)頁內(nèi)容的方式，我們就稱之為客戶端渲染

思考題：如何得知一個網(wǎng)站是哪種方式的渲染？

3 - 客戶端渲染vs服務(wù)端渲染

客戶端渲染我們叫做CSR渲染方式，服務(wù)端渲染我們叫做SSR渲染

3.1 運行架構(gòu)對比

說明

CSR執(zhí)行流程：瀏覽器加載html文件 -> 瀏覽器下載js文件 -> 瀏覽器運行vue代碼 -> 渲染頁面

SSR執(zhí)行流程：瀏覽器加載html文件 -> 服務(wù)端裝填好內(nèi)容 -> 返回瀏覽器渲染

3.2 開發(fā)模式對比

CSR：前后端通過接口JSON數(shù)據(jù)進行通信，各自開發(fā)互不影響

SSR：前后端分工搭配復(fù)雜，前端需要寫好html模板交給后端，后端裝填模板內(nèi)容返給瀏覽器

3.3 特點優(yōu)勢總結(jié)

客戶端渲染（CSR）服務(wù)端渲染（SSR）

首次渲染時間	長	很短
seo支持	差	良好
前后端分工開發(fā)效率	快	慢

思考：如果我們的項目既想要使用vue高效率的開發(fā)項目，同時還想要首屏渲染時間很短，那該怎么辦？

4 - vue框架中的服務(wù)端渲染

為了解決第3章節(jié)提出的問題，目前我們的vue組件都是在瀏覽器側(cè)通過js渲染出來的，所以首次加載時間很慢，那么我們把vue組件交給服務(wù)端負責渲染，渲染為完整內(nèi)容之后直接返給客戶端，是不是就可以可以解決既想渲染快，還想繼續(xù)使用vue進行開發(fā)的問題了？

vue ssr基礎(chǔ)使用

4.1 新建vue-ssr文件夾

vue-ssr

4.2 把server文件夾中的文件拷貝進來

4.3 安裝必要依賴

npm install vue vue-server-renderer --save

4.4 vue服務(wù)端渲染最小demo

app.js

const Vue = require('vue') const server = require('express')()const renderer = require('vue-server-renderer').createRenderer()server.get('*', (req, res) => {const app = new Vue({data: {url: req.url},template: `<div>訪問的 URL 是：{{ url }}</div>`,})renderer.renderToString(app, (err, html) => {if (err) throw errres.send(html)}) })server.listen(8888,() => console.log(`Example app listening on port 8888!`))

4.5 瀏覽器訪問

http://localhost:8888

4.6 查看源代碼

結(jié)論：我們通過在服務(wù)器端渲染vue組件的方式，讓網(wǎng)頁中又有了完整的內(nèi)容，這樣我們就可以既使用了vue開發(fā)又節(jié)省了首次渲染時間

4.7 遺留問題

修改app.js，添加一個button元素并使用vue的方式綁定click事件

const Vue = require('vue') const server = require('express')()const renderer = require('vue-server-renderer').createRenderer()server.get('*', (req, res) => {const app = new Vue({data: {url: req.url},template: `<div>訪問的 URL 是：{{ url }}<button @click="alert('123')">click me!</button></div>`,})renderer.renderToString(app, (err, html) => {if (err) throw errres.send(html)}) })server.listen(8888,() => console.log(`Example app listening on port 8888!`))

運行發(fā)現(xiàn)，頁面成功顯示了button按鈕，但是可惜的是，沒有成功綁定事件，點擊無效，事實上除了事件沒有綁定之外，服務(wù)器端雖然完成了vue的渲染，但是給到客戶端的時候已經(jīng)成了字符串了，一系列我們熟悉的vue應(yīng)用的特性，我們都無法使用，比如數(shù)據(jù)響應(yīng)式更新，那該怎么辦呢？

為了解決以上問題，我們需要引入一個新的概念，稱作同構(gòu)

5 - 理解同構(gòu)理念

一套vue（react）代碼，在服務(wù)端執(zhí)行一次，在客戶端再執(zhí)行一次，就做同構(gòu)

const app = new Vue({data: {url: req.url},template: `<div>訪問的 URL 是：{{ url }}<button @click="alert('123')">click me!</button></div>` })

上面所示的vue代碼，我們在服務(wù)端的執(zhí)行保持不變，只要我們把這段代碼在客戶端再重新執(zhí)行一遍，不就可以擁有原本vue應(yīng)用的所有特性了么，確實如此，不過這個過程的難度太大，我們現(xiàn)在只需要理解，所謂的同構(gòu)是指：同一套vue代碼在服務(wù)端執(zhí)行一次在客戶端再執(zhí)行一次

服務(wù)端執(zhí)行完成渲染解決了首次加載速度慢的問題

瀏覽器執(zhí)行解決了綁定事件及恢復(fù)vue本身特性的問題

6 - Nuxt.js框架使用

nuxt.js是一套使用vue框架開發(fā)應(yīng)用的服務(wù)端渲染框架，提供了開箱即用的功能

1. 使用nuxt.js創(chuàng)建一個ssr項目

npm create nuxt-app <項目名>

按照提示選擇項目之后完成創(chuàng)建，需要注意，這一步要選擇ssr

2. 啟動項目

cd vue-ssr-app npm run dev

http://localhost:3000

3. 查看源代碼

顯然，我們看到了網(wǎng)頁上有實際渲染的內(nèi)容，這是服務(wù)端負責的渲染

4. 搭建首頁

pages/index.vue

在nuxt.js生成的項目中我們依舊像之前一樣寫單文件組件.vue代碼，ElementUI組件也可以正常使用

<template><div class="container"><Logo /><div class="articleList"><el-collapse><el-collapse-item title="一致性 Consistency" name="1"><div>與現(xiàn)實生活一致：與現(xiàn)實生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語言和概念；</div></el-collapse-item></el-collapse></div></div> </template><script> export default {} </script><style> .container{padding:0 200px; } .articleList{margin-top:30px; } </style>

5. 異步數(shù)據(jù)獲取

https://axios.nuxtjs.org/

1. 認識asyncData方法

asyncData方法會在組件（限于頁面組件）每次加載之前被調(diào)用。它可以在服務(wù)端或路由更新之前被調(diào)用，你可以利用 asyncData方法來獲取數(shù)據(jù)，Nuxt.js 會將 asyncData 返回的數(shù)據(jù)融合組件 data 方法返回的數(shù)據(jù)一并返回給當前組件

官網(wǎng)推薦使用的請求方式 https://axios.nuxtjs.org/

async asyncData({ $axios }) {const ip = await $axios.$get('http://icanhazip.com')return { ip } }, data(){return {name:'cp'} }----合并完之后的data數(shù)據(jù)---- {name:'cp',ip }

2. 獲取文章列表（移動端項目）

async asyncData ({ $axios }) {const url = 'http://ttapi.research.itcast.cn/app/v1_1/articles?channel_id=0&timestamp=1606309443970&with_top=1'const res = await $axios.$get(url)// eslint-disable-next-line no-consoleconsole.log('文章數(shù)據(jù)列表：', res)return {list: res.data.results}}

3. 渲染接口數(shù)據(jù)

<el-collapse><el-collapse-item v-for="item in list" :key="item.id" :title="item.title.slice(0,40)"><div>評論數(shù)：{{ item.comm_count }} 點贊數(shù)：{{ item.like_count }}</div></el-collapse-item> </el-collapse>

4. 預(yù)覽效果并查看源代碼

結(jié)論：我們完成了既使用vue開發(fā)模式，又實現(xiàn)了服務(wù)端渲染模式，nice~

7- 總結(jié)

7.1 服務(wù)端渲染和客戶端渲染各自指什么？有什么特點？

SSR 服務(wù)端渲染網(wǎng)頁內(nèi)容由服務(wù)端生成首屏?xí)r間短有利于seo CSR 客戶端渲染 vue、react框架渲染方式 spa都是客戶端渲染首屏渲染時間長不利于seo

7.2 同構(gòu)的本質(zhì)是什么？

一份vue代碼在服務(wù)端渲染一遍然后在客戶端再渲染一遍服務(wù)端渲染解決了首屏顯示快客戶端渲染是需要把事件、響應(yīng)式特性等vue經(jīng)典的特性都綁回去我們既可以使用vue的開發(fā)模式又可以享受倆種渲染方式的優(yōu)勢

7.3 Nuxt.js中如何實現(xiàn)異步數(shù)據(jù)獲取（asyncData方法）？

asyncData函數(shù)時Nuxtjs框架內(nèi)置的一個函數(shù) 執(zhí)行結(jié)果和和data進行融合一起返給當前組件

總結(jié)

以上是生活随笔為你收集整理的了解 Vue SSR 这一篇足以的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：余额宝收益率跌至冰点：存10万一天赚不到
下一篇： Vue2的核心原理剖析