什么是服務(wù)器端渲染霹陡？
Vue.js 是構(gòu)建客戶端應(yīng)用程序的框架奄喂。默認情況下，可以在瀏覽器中輸出 Vue 組件媒怯，進行生成 DOM 和操作 DOM推正。然而觅赊，也可以將同一個組件渲染為服務(wù)器端的 HTML 字符串龙助，將它們直接發(fā)送到瀏覽器，最后將這些靜態(tài)標記"激活"為客戶端上完全可交互的應(yīng)用程序康震。
為什么使用服務(wù)器端渲染 (SSR)燎含？
與傳統(tǒng) SPA (單頁應(yīng)用程序 (Single-Page Application)) 相比，服務(wù)器端渲染 (SSR) 的優(yōu)勢主要在于：
更好的 SEO腿短，由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面屏箍。
更快的內(nèi)容到達時間 (time-to-content)，特別是對于緩慢的網(wǎng)絡(luò)情況或運行緩慢的設(shè)備橘忱。無需等待所有的 JavaScript 都完成下載并執(zhí)行赴魁，才顯示服務(wù)器渲染的標記，所以你的用戶將會更快速地看到完整渲染的頁面钝诚。
SSR渲染過程
我們可以看到擂啥，左側(cè)Source部分就是我們所編寫的源代碼编整，所有代碼有一個公共入口呕缭，就是app.js，緊接著就是服務(wù)端的入口
（entry-server.js）和客戶端的入口（entry-client.js）敢课。當完成所有源代碼的編寫之后，我們通過webpack的構(gòu)建，打包出兩個bundle，分別是server bundle和client bundle瘪弓；當用戶進行頁面訪問的時候，先是經(jīng)過服務(wù)端的入口盔腔，將vue組建組裝為html字符串杠茬，并混入客戶端所訪問的html模板中，最終就完成了整個ssr渲染的過程弛随。
Nuxt框架
Nuxt 是一個基于 Vue 生態(tài)的更高層的框架，為開發(fā)服務(wù)端渲染的 Vue 應(yīng)用提供了極其便利的開發(fā)體驗宁赤。更酷的是舀透，你甚至可以用它來做為靜態(tài)站生成器。
安裝
// init過程中根據(jù)提示安裝用到的插件燈
npm init nuxt-app <project-name>
cd <project-name>
npm run dev
配置
nuxt.config.js
const path = require('path')
export default {
// 允許你在`Javascript`和`Css`中使用別名訪問自定義目錄
alias: {
'~~': `<rootDir>`,
'@@': `<rootDir>`,
'~': `<srcDir>`,
'@': `<srcDir>`,
'assets': `<srcDir>/assets`, // (unless you have set a custom `dir.assets`)
'static': `<srcDir>/static`, // (unless you have set a custom `dir.static`)
'style': path.resolve(__dirname, './assets/style')
},
// 定義應(yīng)用程序的工作區(qū)目錄决左，默認值process.cwd()
rootDir: '',
// 定義應(yīng)用程序的source目錄愕够，默認值同rootDir
srcDir: '',
// server連接配置
server: {
port: 3000, // default: 3000
host: '0.0.0.0', // default: localhost,
timing: false
},
// npm run generate時執(zhí)行，構(gòu)建部署靜態(tài)應(yīng)用程序
generate: {
// 目錄名
dir: 'dist'
},
// true啟動服務(wù)器端渲染佛猛，false只啟動客戶端渲染
ssr: true,
// headers設(shè)置惑芭，Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'ssr-demo',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// 全局css，Global CSS: https://go.nuxtjs.dev/config-css
css: [
// 'ant-design-vue/dist/antd.css'
// css后綴可以省略
'assets/style/common'
],
// 添加plugins目錄下的js文件到應(yīng)用程序中继找，Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'@/plugins/antd-ui',
'@/plugins/veui'
],
// 自動掃描和導(dǎo)入組件遂跟，無需在使用時import組件，可直接使用婴渡，Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
// 是否提取css至獨立文件中
// extractCSS: true,
// babel相關(guān)配置
babel: {
plugins: [
'veui',
['import', {
'libraryName': 'ant-design-vue',
'libraryDirectory': 'es',
'style': true
// customStyleName: name => {
// return `assets/${name}.css`
// }
}
] // `style: true` 會加載 less 文件
]
},
// 可省略的擴展名
resolve: {
extensions: ['.js', '.vue', '.json']
},
// 需要進行babel編譯的包
transpile: ['veui', 'vue-awesome', 'ant-design-vue'],
// loader配置
loaders: {
vue: {
extractCSS: true
},
less: {
javascriptEnabled: true
}
},
// 手動擴展客戶端和服務(wù)端的webpack配置
extend(config, context){
//添加loader規(guī)則
config.module.rules.push({
test: /\.vue$/, //匹配.svg
include: [path.resolve(__dirname, 'node_modules/veui')], //將存放svg的目錄加入到loader處理目錄
use: [{ loader: 'veui-loader', options: {
modules: [
{
package: 'veui-theme-blue',
fileName: '${module}.less'
},
{
package: 'veui-theme-blue',
fileName: '${module}.js',
transform: false
}
]
}}]
})
}
}
}
Demo示例
1. ssr: true幻锁，服務(wù)端渲染
服務(wù)端渲染時，可以看到入口返回的Preview就是在服務(wù)端生成好的頁面边臼，這種方式更利于SEO和快速展示頁面哄尔。
2. ssr: false，客戶端渲染
客戶端渲染時柠并，可以看到入口返回的Preview是一個空白頁面岭接，頁面的Dom是由提取的其他js在瀏覽器端動態(tài)生成的。
3. BundleRenderer自動內(nèi)聯(lián)關(guān)鍵CSS（critical css）
關(guān)于critical css的介紹臼予，可以看另一篇文章：https://juejin.cn/post/6946475178188603429/
pages/index.vue為首屏渲染頁面
<template>
<div class="index">首頁</div>
</template>
<style>
.index {
color: red;
}
</style>
新建pages/test.vue頁面鸣戴，驗證SSR是否會自動注入關(guān)鍵css（critical css）
<template>
<div class="test">測試</div>
</template>
<style>
.test {
color: red;
}
</style>
- 在
index.vue中引入test.vue，服務(wù)啟動后瘟栖，test.vue樣式也以style形式內(nèi)嵌在頁面中
image.png - 不在
index.vue中引入test.vue葵擎，服務(wù)啟動后，test.vue樣式則沒有內(nèi)嵌在首屏渲染頁面中
image.png
只有在訪問test路由時才顯示test.vue相關(guān)樣式
image.png
總結(jié)：SSR服務(wù)端會自動注入首屏渲染關(guān)鍵css半哟，無需引入其他插件酬滤。
4. extract提取css
啟用extract提取css后签餐，樣式被提取到單獨的css文件中，以外鏈的形式引入盯串。
以上就是Vue SSR nuxt框架相關(guān)的整理氯檐，每天都有學不完的新知識，加油Ｌ迥蟆冠摄！
