vue ssr服務端渲染（vue+nuxt）-季度分享

時間 2020-06-29

標籤 vue ssr 服務渲染 vue+nuxt nuxt 季度分享简体版

原文原文鏈接

今天給你們分享的是Vue服務端渲染，大概會佔用你們40分鐘的時間，今天分享的目的主要是讓你們理解三個點：

一、深刻理解服務端渲染(SSR)概念php

二、掌握實現服務端渲染的Vue通用框架nuxt.js使用css

三、理解Vue SSR實現原理

在深刻理解服務器端渲染以前，咱們先要知道什麼是服務器端渲染？咱們能夠從早期的web開發提及，那個時候先後端尚未分離，前端是否是隻負責發起請求，後端查詢數據庫數據，數據塞到jsp,php等模板，業務邏輯和數據處理是否是都在後端啊，而後後端給前端返回一個html頁面，前端只負責展現，因此是否是能夠理解爲在服務端就生成好的html頁面，是否是就是服務端渲染；那什麼是客戶端渲染，是否是能夠理解成在客戶端生成好的html頁面就是客戶端渲染啊？html

那什麼是多頁面應用和單頁面應用呢？早期的web開發是否是就是多頁應用的一種，每次請求都是整頁加載刷新，應用由多個完整的頁面構成。前端

那什麼是單頁面應用呢？咱們pc端管理後臺是否是就是單頁面應用的一種，通俗一點說就是指應用只有一個主頁面的應用，咱們去看單頁面應用，右鍵 ‘查看網頁源代碼’ 是否是隻有一個殼？<body><div id='app'></div></body>單頁面應用瀏覽器一開始要加載全部必須的 html, js, css，而後在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新局部資源。vue

那說了這麼多，咱們知道服務端渲染ssr解決了什麼問題？有什麼好處？

一、更好的 SEOweb

爲何說有更好的seo呢，其實剛剛就回答了這個問題，服務端渲染返回的是完整的網頁內容，是否是搜索引擎爬蟲能爬的到你網頁裏面的內容，而單頁面應用只有一個殼，爬蟲不會爬取到js異步加載的內容vuex

二、更快的首屏內容到達時間vue-cli

爲何說服務端渲染有更快的首屏內容到達時間呢？是否是這個快慢是跟單頁面相比較的，剛剛咱們是否是已經回答了，單頁面應用才須要瀏覽器一開始要加載全部必須的 html, js, css，因此首屏是否是比服務器端渲染慢。

那如今咱們已經理解了服務器端渲染和單頁面應用的優缺點，若是咱們要開發一個網站，好比下個季度官網的開發，注重seo優化，但願網頁內容能被搜索引擎爬到，是否是有必要考慮服務器端渲染的方式，那咱們有可能回到早期的開發方式嗎，後端同窗估計不答應，那咱們vue服務器端渲染就是一個折中方案，首屏實現服務器端渲染，有利於seo優化，同時又具有單頁面應用優勢；數據庫

那咱們如何新建一個基於vue+nuxt的ssr項目，相似於vue-cli手腳架工具，咱們執行$ npx create-nuxt-app <項目名>，快速建立了以下目錄結構的項目：npm

（npx與npm的區別，簡單講解）

對着ppt解釋項目目錄結構；......

只有 beforeCreate 和 created 會在服務器端渲染 (SSR) 過程當中被調用。這就是說任何vue其餘生命週期鉤子函數中的代碼，只會在客戶端執行。

結合實際demo演示講解如下重點：

l 只是首屏服務器端渲染，同時具有SPA應用的優勢