文章目錄
- 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 開發模式對比
- 3.3 特點優勢總結
- 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創建一個ssr項目
- 2. 啟動項目
- 3. 查看源代碼
- 4. 搭建首頁
- 5. 異步數據獲取
- 1. 認識asyncData方法
- 2. 獲取文章列表（移動端項目）
- 3. 渲染接口數據
- 4. 預覽效果并查看源代碼
- 7- 總結
- 7.1 服務端渲染和客戶端渲染各自指什么？有什么特點？
- 7.2 同構的本質是什么？
- 7.3 Nuxt.js中如何實現異步數據獲取（asyncData方法）？
1 - 什么是服務器端渲染？
server side render 前端頁面的產生是由服務器端生成的，我們就稱之為服務端渲染
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 右鍵查看源代碼
總結：所謂的服務端渲染值得是頁面的內容完全是由服務端側決定到底要展示出什么內容
2 - 什么是客戶端渲染？
client side render 服務端只提供json格式的數據，渲染成什么樣子由客戶端通過js控制
通過vite快速創建一個基于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 查看源代碼
結論：通過查看源代碼我們發現，源代碼并沒有顯示我們頁面中實際渲染的內容，我們只看到一個main.js文件，和一個id為app的根元素，所以我們知道網頁內容是通過js來動態的進行渲染的，js運行在瀏覽器，瀏覽器也就是客戶端，這種由瀏覽器端的js做主導渲染網頁內容的方式，我們就稱之為客戶端渲染
思考題：如何得知一個網站是哪種方式的渲染？
3 - 客戶端渲染vs服務端渲染
客戶端渲染我們叫做CSR渲染方式，服務端渲染我們叫做SSR渲染
3.1 運行架構對比
說明
CSR執行流程：瀏覽器加載html文件 -> 瀏覽器下載js文件 -> 瀏覽器運行vue代碼 -> 渲染頁面
SSR執行流程：瀏覽器加載html文件 -> 服務端裝填好內容 -> 返回瀏覽器渲染
3.2 開發模式對比
CSR：前后端通過接口JSON數據進行通信，各自開發互不影響
SSR：前后端分工搭配復雜，前端需要寫好html模板交給后端，后端裝填模板內容返給瀏覽器
3.3 特點優勢總結
| 客戶端渲染（CSR） | 服務端渲染（SSR） | |
|---|---|---|
| 首次渲染時間 | 長 | 很短 |
| seo支持 | 差 | 良好 |
| 前后端分工開發效率 | 快 | 慢 |
思考：如果我們的項目既想要使用vue高效率的開發項目，同時還想要首屏渲染時間很短，那該怎么辦？
4 - vue框架中的服務端渲染
為了解決第3章節提出的問題，目前我們的vue組件都是在瀏覽器側通過js渲染出來的，所以首次加載時間很慢，那么我們把vue組件交給服務端負責渲染，渲染為完整內容之后直接返給客戶端，是不是就可以可以解決既想渲染快，還想繼續使用vue進行開發的問題了？
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組件的方式，讓網頁中又有了完整的內容，這樣我們就可以既使用了vue開發又節省了首次渲染時間
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!`))
運行發現，頁面成功顯示了button按鈕，但是可惜的是，沒有成功綁定事件，點擊無效，事實上除了事件沒有綁定之外，服務器端雖然完成了vue的渲染，但是給到客戶端的時候已經成了字符串了，一系列我們熟悉的vue應用的特性，我們都無法使用，比如數據響應式更新，那該怎么辦呢？
為了解決以上問題，我們需要引入一個新的概念，稱作 同構
5 - 理解同構理念
一套vue（react）代碼，在服務端執行一次，在客戶端再執行一次，就做同構
const app = new Vue({data: {url: req.url},template: `<div>訪問的 URL 是：{{ url }}<button @click="alert('123')">click me!</button></div>`
})
上面所示的vue代碼，我們在服務端的執行保持不變，只要我們把這段代碼在客戶端再重新執行一遍，不就可以擁有原本vue應用的所有特性了么，確實如此，不過這個過程的難度太大，我們現在只需要理解，所謂的同構是指：同一套vue代碼在服務端執行一次在客戶端再執行一次
- 服務端執行完成渲染解決了首次加載速度慢的問題
- 瀏覽器執行解決了綁定事件及恢復vue本身特性的問題
6 - Nuxt.js框架使用
nuxt.js是一套使用vue框架開發應用的服務端渲染框架，提供了開箱即用的功能
1. 使用nuxt.js創建一個ssr項目
npm create nuxt-app <項目名>
按照提示選擇項目之后完成創建，需要注意，這一步要選擇ssr
2. 啟動項目
cd vue-ssr-app
npm run dev
http://localhost:3000
3. 查看源代碼
顯然，我們看到了網頁上有實際渲染的內容，這是服務端負責的渲染
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>與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；</div></el-collapse-item></el-collapse></div></div>
</template><script>
export default {}
</script><style>
.container{padding:0 200px;
}
.articleList{margin-top:30px;
}
</style>
5. 異步數據獲取
https://axios.nuxtjs.org/
1. 認識asyncData方法
asyncData方法會在組件（限于頁面組件）每次加載之前被調用。它可以在服務端或路由更新之前被調用，你可以利用 asyncData方法來獲取數據，Nuxt.js 會將 asyncData 返回的數據融合組件 data 方法返回的數據一并返回給當前組件
官網推薦使用的請求方式 https://axios.nuxtjs.org/
async asyncData({ $axios }) {const ip = await $axios.$get('http://icanhazip.com')return { ip }
},
data(){return {name:'cp'}
}----合并完之后的data數據----
{name:'cp',ip
}
2. 獲取文章列表（移動端項目）
async asyncData ({ $axios }) {const url = 'http://ttapi.research.itcast.cn/app/v1_1/articles?channel_id=0×tamp=1606309443970&with_top=1'const res = await $axios.$get(url)// eslint-disable-next-line no-consoleconsole.log('文章數據列表：', res)return {list: res.data.results}}
3. 渲染接口數據
<el-collapse><el-collapse-item v-for="item in list" :key="item.id" :title="item.title.slice(0,40)"><div>評論數：{{ item.comm_count }} 點贊數：{{ item.like_count }}</div></el-collapse-item>
</el-collapse>
4. 預覽效果并查看源代碼
結論：我們完成了既使用vue開發模式，又實現了服務端渲染模式，nice~
7- 總結
7.1 服務端渲染和客戶端渲染各自指什么？有什么特點？
SSR 服務端渲染 網頁內容由服務端生成 首屏時間短 有利于seo
CSR 客戶端渲染 vue、react框架渲染方式 spa都是客戶端渲染 首屏渲染時間長不利于seo
7.2 同構的本質是什么？
一份vue代碼在服務端渲染一遍 然后在客戶端再渲染一遍
服務端渲染解決了首屏顯示快 客戶端渲染是需要把事件、響應式特性等vue經典的特性都綁回去我們既可以使用vue的開發模式 又可以享受倆種渲染方式的優勢
7.3 Nuxt.js中如何實現異步數據獲取（asyncData方法）？
asyncData函數時Nuxtjs框架內置的一個函數
執行結果和和data進行融合 一起返給當前組件
)
)
