什么是srr（服務(wù)器渲染）
直白的說(shuō)就是在服務(wù)端拿數(shù)據(jù)進(jìn)行解析渲染，直接生成html片段返回給前端。具體用法也有很多種比如：傳統(tǒng)的服務(wù)端模板引擎渲染整個(gè)頁(yè)面服務(wù)渲染生成htmll代碼塊, 前端 AJAX 獲取然后js動(dòng)態(tài)添加哑姚。
為什么要做SSR
- 首先是seo問(wèn)題，前端動(dòng)態(tài)渲染的內(nèi)容是不能被抓取到的缀踪，而使用服務(wù)端渲染就可以解決這個(gè)問(wèn)題井氢。
- 其次就是首屏加載過(guò)慢這種問(wèn)題，比如在SPA中裙椭，打開(kāi)首頁(yè)需要初始加載很多資源躏哩，這時(shí)考慮在首屏使用服務(wù)端渲染，也是一種折中的優(yōu)化方案揉燃。
使用NUTX實(shí)現(xiàn)服務(wù)器渲染
NUTX的作用就是在 node.js 上進(jìn)一步封裝扫尺，然后省去我們搭建服務(wù)端環(huán)境的步驟，只需要遵循這個(gè)庫(kù)的一些規(guī)則就能輕松實(shí)現(xiàn) SSR炊汤，類似的工具還有一個(gè)叫unvue的正驻。
Nuxt使用步驟
- 安裝vue腳手架 npm install -g vue-cli
- 完成后在需要?jiǎng)?chuàng)建的目錄下執(zhí)行以下命令：
vue init nuxt/koa ssr-demo(項(xiàng)目名稱）
cd ssr-demo
npm install
- 執(zhí)行npm run dev
- 打開(kāi)瀏覽器
http://localhost:3000 -
目錄結(jié)構(gòu)image
6.Nuxt.js 給出了最簡(jiǎn)單的目錄結(jié)構(gòu)
|-- pages
|-- index.vue
|-- package.json
也就是說(shuō)弊攘，至少需要一個(gè) page 來(lái)作為展示頁(yè)。
-
文件的路徑建議都采用絕對(duì)路徑
例：怎么在 /pages/user/me.vue 引入一個(gè) static 文件夾里的圖片
<img src="~static/img/logo.png" alt="Logo"/>
-
路由
Nuxt.js 根據(jù) pages 目錄結(jié)構(gòu)去生成 vue-router 配置姑曙，也就是說(shuō) pages 目錄的結(jié)構(gòu)直接影響路由結(jié)構(gòu)
例1:
|-- pages
|-- posts
|-- index.vue
|-- welcome.vue
|-- about.vue
|-- index.vue
會(huì)生成
routes: [
{
path: '/posts',
component: '~pages/posts/index.vue'
}, {
path: '/posts/welcome',
component: '~pages/posts/welcome.vue'
}, {
path: '/about',
component: '~pages/about.vue'
}, {
path: '/',
component: '~pages/index.vue'
}
]
例2:隱藏路由 在文件名前加 _
|-- pages
|-- _about.vue
|-- index.vue
會(huì)生成
routes: [
{
path: '/',
component: '~pages/index.vue'
}
]
-
配置文件
目錄下的 nuxt.config.js 是我們唯一的配置入口襟交，這里不建議修改 .nuxt 目錄，除非特殊需求
默認(rèn)的給力我們?nèi)齻€(gè)配置 ·head·css·loading· 分別是頭部設(shè)置伤靠，全局css婿着，loading進(jìn)度條
nuxt.config.js 的全部的配置如下,點(diǎn)擊查看具體例子
一個(gè)具體的例子(仿知乎live)
-
在pages下面創(chuàng)建如下文件夾和文件
會(huì)生成如下路由
[
{
path: "/",
component: _f50ec93a,
name: "index",
children: [
{
path: "me",
component: _52bc7474,
name: "index-me"
},
{
path: "home",
component: _097b5f3b,
name: "index-home"
},
{
path: "course",
component: _361a8b77,
name: "index-course"
},
{
path: "hot",
component: _111d20a1,
name: "index-hot"
}
]
},
{
path: "/account",
component: _2c407cfe,
name: "account",
children: [
{
path: "register",
component: _1eaf91c4,
name: "account-register"
},
{
path: "login",
component: _4a531fd0,
name: "account-login"
}
]
}
]
- 異步請(qǐng)求
asyncData方法用于 fetch 數(shù)據(jù)竟宋，并在服務(wù)端渲染頁(yè)面，返回給瀏覽器形纺。
本文例子github地址：https://github.com/wotu-courses/ssr-demo
參考文章：
https://segmentfault.com/a/1190000007933349
https://segmentfault.com/a/1190000009842518
