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

vue

了解 Vue SSR 这一篇足以

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

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

文章目錄

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

1 - 什么是服務器端渲染？

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

1.1 新建server文件夾

server

1.2 生成一個node項目

npm init -y

1.3 安裝express

express 官方文檔

npm install express --save

1.4 服務端渲染小案例

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 右鍵查看源代碼

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

2 - 什么是客戶端渲染？

client side render 服務端只提供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 查看源代碼

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

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

3 - 客戶端渲染vs服務端渲染

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

3.1 運行架構對比

說明

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

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

3.2 開發(fā)模式對比

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

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

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

客戶端渲染（CSR）服務端渲染（SSR）

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

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

4 - vue框架中的服務端渲染

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

vue ssr基礎使用

4.1 新建vue-ssr文件夾

vue-ssr

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

4.3 安裝必要依賴

npm install vue vue-server-renderer --save

4.4 vue服務端渲染最小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 查看源代碼

結論：我們通過在服務器端渲染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按鈕，但是可惜的是，沒有成功綁定事件，點擊無效，事實上除了事件沒有綁定之外，服務器端雖然完成了vue的渲染，但是給到客戶端的時候已經(jīng)成了字符串了，一系列我們熟悉的vue應用的特性，我們都無法使用，比如數(shù)據(jù)響應式更新，那該怎么辦呢？

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

5 - 理解同構理念

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

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

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

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

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

6 - Nuxt.js框架使用

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

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)容，這是服務端負責的渲染

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)實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；</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方法會在組件（限于頁面組件）每次加載之前被調用。它可以在服務端或路由更新之前被調用，你可以利用 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. 預覽效果并查看源代碼

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

7- 總結

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

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

7.2 同構的本質是什么？

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

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

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

總結

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

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

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