詳解服務(wù)端預(yù)渲染之Nuxt(介紹篇)
現(xiàn)在前端開發(fā)一般都是前后端分離,mvvm和mvc的開發(fā)框架,如Angular、React和Vue等,雖然寫框架能夠使我們快速的完成開發(fā),但是由于前后臺(tái)分離,給項(xiàng)目SEO帶來(lái)很大的不便,搜索引擎在檢索的時(shí)候是在網(wǎng)頁(yè)中爬取數(shù)據(jù),由于單頁(yè)面應(yīng)用讀取到的頁(yè)面是幾乎空白的,無(wú)法爬取到任何數(shù)據(jù)信息。
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1"> <title>authorization_web</title> </head> <body> <div id=app></div> </body> </html>
如上代碼,單頁(yè)面應(yīng)用查看源代碼的時(shí)候如上所示,所以搜索引擎無(wú)法爬取到任何信息,搜索引擎會(huì)認(rèn)為當(dāng)前頁(yè)面為一個(gè)空頁(yè)面。為了解決SEO問題,推出了SSR服務(wù)端預(yù)渲染,以便提高對(duì)SEO優(yōu)化。
什么是SSR
在認(rèn)識(shí)SSR之前,首先對(duì)CSR與SSR之間做個(gè)對(duì)比。
首先看一下傳統(tǒng)的web開發(fā),傳統(tǒng)的web開發(fā)是,客戶端向服務(wù)端發(fā)送請(qǐng)求,服務(wù)端查詢數(shù)據(jù)庫(kù),拼接HTML字符串(模板),通過一系列的數(shù)據(jù)處理之后,把整理好的HTML返回給客戶端,瀏覽器相當(dāng)于打開了一個(gè)頁(yè)面。這種比如我們經(jīng)常聽說(shuō)過的jsp,PHP,aspx也就是傳統(tǒng)的MVC的開發(fā)。
SPA應(yīng)用,到了Vue、React,單頁(yè)面應(yīng)用優(yōu)秀的用戶體驗(yàn),逐漸成為了主流,頁(yè)面整體式j(luò)avaScript渲染出來(lái)的,稱之為客戶端渲染CSR。SPA渲染過程。由客戶端訪問URL發(fā)送請(qǐng)求到服務(wù)端,返回HTML結(jié)構(gòu)(但是SPA的返回的HTML結(jié)構(gòu)是非常的小的,只有一個(gè)基本的結(jié)構(gòu),如第一段代碼所示)。客戶端接收到返回結(jié)果之后,在客戶端開始渲染HTML,渲染時(shí)執(zhí)行對(duì)應(yīng)javaScript,最后渲染template,渲染完成之后,再次向服務(wù)端發(fā)送數(shù)據(jù)請(qǐng)求,注意這里時(shí)數(shù)據(jù)請(qǐng)求,服務(wù)端返回json格式數(shù)據(jù)??蛻舳私邮諗?shù)據(jù),然后完成最終渲染。
SPA雖然給服務(wù)器減輕了壓力,但是也是有缺點(diǎn)的:
- 首屏渲染時(shí)間比較長(zhǎng):必須等待JavaScript加載完畢,并且執(zhí)行完畢,才能渲染出首屏。
- SEO不友好:爬蟲只能拿到一個(gè)div元素,認(rèn)為頁(yè)面是空的,不利于SEO。
為了解決如上兩個(gè)問題,出現(xiàn)了SSR解決方案,后端渲染出首屏的DOM結(jié)構(gòu)返回,前端拿到內(nèi)容帶上首屏,后續(xù)的頁(yè)面操作,再用單頁(yè)面路由和渲染,稱之為服務(wù)端渲染(SSR)。
SSR渲染流程是這樣的,客戶端發(fā)送URL請(qǐng)求到服務(wù)端,服務(wù)端讀取對(duì)應(yīng)的url的模板信息,在服務(wù)端做出html和數(shù)據(jù)的渲染,渲染完成之后返回html結(jié)構(gòu),客戶端這時(shí)拿到的之后首屏頁(yè)面的html結(jié)構(gòu)。所以用戶在瀏覽首屏的時(shí)候速度會(huì)很快,因?yàn)榭蛻舳瞬恍枰俅伟l(fā)送ajax請(qǐng)求。并不是做了SSR我們的頁(yè)面就不屬于SPA應(yīng)用了,它仍然是一個(gè)獨(dú)立的spa應(yīng)用。
SSR是處于CSR與SPA應(yīng)用之間的一個(gè)折中的方案,在渲染首屏的時(shí)候在服務(wù)端做出了渲染,注意僅僅是首屏,其他頁(yè)面還是需要在客戶端渲染的,在服務(wù)端接收到請(qǐng)求之后并且渲染出首屏頁(yè)面,會(huì)攜帶著剩余的路由信息預(yù)留給客戶端去渲染其他路由的頁(yè)面。
Nuxt.js 介紹
在Nuxt官方網(wǎng)站有一句這樣的話:Nuxt.js預(yù)設(shè)了使您開發(fā)Vue.js應(yīng)用程序所需的所有配置。Nuxt是一個(gè)基于Vue.js的通用應(yīng)用框架。通過對(duì)客戶端/服務(wù)端基礎(chǔ)框架的抽象組織,Nuxt主要關(guān)注的是應(yīng)用的ui渲染。
通過上面的這些介紹可以簡(jiǎn)單的得出:
- Nuxt不僅僅用于服務(wù)端渲染也可以用于SPA應(yīng)用的開發(fā)
- 利用Nuxt提供的項(xiàng)目結(jié)構(gòu)、異步數(shù)據(jù)加載,中間件的支持,布局等特性可大幅提升開發(fā)效率
- Nuxt可用于網(wǎng)站靜態(tài)化,可以使用命令將整個(gè)網(wǎng)頁(yè)打包成靜態(tài)頁(yè)面,使SEO更加友好
Nuxt.js 特性
- 基于Vue
- 自動(dòng)代碼分層
- 服務(wù)端渲染
- 強(qiáng)大的路由功能,支持異步數(shù)據(jù)
- 靜態(tài)文件服務(wù)
- EcmaScript6和EcmaScript7的語(yǔ)法支持
- 打包和壓縮JavaScript和Css
- HTML頭部標(biāo)簽管理
- 本地開發(fā)支持熱加載
- 集成ESLint
- 支持各種樣式預(yù)編譯器SASS、LESS等等
- 支持HTTP/2推送
Nuxt 渲染流程
一個(gè)完整的服務(wù)器請(qǐng)求到渲染的流程
通過上面的流程圖可以看出,當(dāng)一個(gè)客戶端請(qǐng)求進(jìn)入的時(shí)候,服務(wù)端有通過nuxtServerInit這個(gè)命令執(zhí)行在Store的action中,在這里接收到客戶端請(qǐng)求的時(shí)候,可以將一些客戶端信息存儲(chǔ)到Store中,也就是說(shuō)可以把在服務(wù)端存儲(chǔ)的一些客戶端的一些登錄信息存儲(chǔ)到Store中。之后使用了中間件機(jī)制,中間件其實(shí)就是一個(gè)函數(shù),會(huì)在每個(gè)路由執(zhí)行之前去執(zhí)行,在這里可以做很多事情,或者說(shuō)可以理解為是路由器的攔截器的作用。然后再validate執(zhí)行的時(shí)候?qū)蛻舳藬y帶的參數(shù)進(jìn)行校驗(yàn),在asyncData與fetch進(jìn)入正式的渲染周期,asyncData向服務(wù)端獲取數(shù)據(jù),把請(qǐng)求到的數(shù)據(jù)合并到Vue中的data中,
Nuxt說(shuō)明
Nuxt安裝:
確保安裝了npx(npx在NPM版本5.2.0默認(rèn)安裝了):
npx create-nuxt-app <項(xiàng)目名>
安裝向?qū)В?/p>
Project name // 項(xiàng)目名稱 Project description // 項(xiàng)目描述 Use a custom server framework // 選擇服務(wù)器框架 Choose features to install // 選擇安裝的特性 Use a custom UI framework // 選擇UI框架 Use a custom test framework // 測(cè)試框架 Choose rendering mode // 渲染模式 Universal // 渲染所有連接頁(yè)面 Single Page App // 只渲染當(dāng)前頁(yè)面
這些都是比較重要的其他的配置內(nèi)容就不做介紹了,一路回車即可。
目錄結(jié)構(gòu)介紹
assets // 存放素材(需要執(zhí)行webpack預(yù)處理操作) components // 組件 layouts // 布局文件 static // 靜態(tài)文件(不需要webpack預(yù)處理操作) middleware // 中間件 pages // 所有頁(yè)面 plugins // 插件 server // 服務(wù)端代碼 store // vuex
配置文件
const pkg = require('./package') module.exports = { mode: 'universal', // 當(dāng)前渲染使用模式 head: { // 頁(yè)面head配置信息 title: pkg.name, // title meta: [ // meat { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: pkg.description } ], link: [ // favicon,若引用css不會(huì)進(jìn)行打包處理 { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, loading: { color: '#fff' }, // 頁(yè)面進(jìn)度條 css: [ // 全局css(會(huì)進(jìn)行webpack打包處理) 'element-ui/lib/theme-chalk/index.css' ], plugins: [ // 插件 '@/plugins/element-ui' ], modules: [ // 模塊 '@nuxtjs/axios', ], axios: {}, build: { // 打包 transpile: [/^element-ui/], extend(config, ctx) { // webpack自定義配置 } } }
Nuxt運(yùn)行命令
{ "scripts": { // 開發(fā)環(huán)境 "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server", // 打包 "build": "nuxt build", // 在服務(wù)端運(yùn)行 "start": "cross-env NODE_ENV=production node server/index.js", // 生成靜態(tài)頁(yè)面 "generate": "nuxt generate" } }
結(jié)語(yǔ)
這里簡(jiǎn)單的對(duì)Nuxt做了一些介紹,會(huì)持續(xù)更新對(duì)Nuxt的跟進(jìn),希望會(huì)對(duì)大家有所幫助,如果有什么問題,可以在下面留言。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue2+SpringBoot實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出到csv文件并下載的使用示例
本文主要介紹了Vue2+SpringBoot實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出到csv文件并下載,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10實(shí)例詳解vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法
這篇文章主要介紹了vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-08-08Vue封裝數(shù)字框組件實(shí)現(xiàn)流程詳解
這篇文章主要介紹了Vue封裝數(shù)字框組件實(shí)現(xiàn)流程,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-04-04Vue $attrs & inheritAttr實(shí)現(xiàn)button禁用效果案例
這篇文章主要介紹了Vue $attrs & inheritAttr實(shí)現(xiàn)button禁用效果案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-12-12vue實(shí)現(xiàn)tab欄點(diǎn)擊高亮效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)tab欄點(diǎn)擊高亮效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08誤引用vuex-persistedstate導(dǎo)致用戶信息無(wú)法清除問題及解決
這篇文章主要介紹了誤引用vuex-persistedstate導(dǎo)致用戶信息無(wú)法清除問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vite項(xiàng)目的根目錄中的env.d.ts類型聲明文件里要寫什么
這篇文章主要介紹了vite項(xiàng)目的根目錄中的env.d.ts類型聲明文件里要寫什么,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08