(十七)nuxt.js 簡述 客戶端渲染 服務端渲染 簡介


nuxt.js 簡述

https://www.nuxtjs.cn/
偶然間看見了這個東西 記錄一下 順便理解一下相關於 前端解析 部署 渲染啥的的流程
vue單頁面應用渲染是從服務器獲取所需js,在客戶端將其解析生成html掛載於
id為app的DOM元素上,這樣會存在兩大問題。

什么是nuxt.js

Nuxt.js 是一個基於Vue.js的通用應用框架,預設了利用Vue.js開發服務端渲染的應用所需要的各種配置。可以將html在服務端渲染,合成完整的html文件再輸出到瀏覽器。
在這里插入圖片描述
nuxt是關於服務端渲染的,如若想讓組件在客戶端渲染,可以使用 將其包裹起來(該標簽最多只能包含一個子組件/元素)。
這樣在未獲取到內容時,頁面先采用<div class="no-ssr-placeholder" data-v-2a183b29=""></div>占位,然后將獲取到的html覆蓋該占位

和vue的區別 (具體使用得寫流程)

  1. 路由
    nuxt按照 pages 文件夾的目錄結構自動生成路由
    vue需在 src/router/index.js 手動配置路由

  2. 入口頁面
    nuxt頁面入口為 layouts/default.vue
    vue頁面入口為 src/App.vue

  3. webpack配置
    nuxt內置webpack,允許根據服務端需求,在 nuxt.config.js 中的build屬性自定義構建webpack的配置,覆蓋默認配置
    vue關於webpack的配置存放在build文件夾下

服務端渲染 (SSR)

  1. 概念: 就是將數據和模板組裝成 html
  2. 解釋一:服務端在返回 html 之前,在特定的區域,符號里用數據填充,再給客戶端,客戶端只負責解析 HTML
  3. 解釋二:服務端渲染的模式下,當用戶第一次請求頁面時,由服務器把需要的組件或頁面渲染成 HTML 字符串,然后把它返回給客戶端。客戶端拿到手的,是可以直接渲染然后呈現給用戶的 HTML 內容,不需要為了生成 DOM 內容自己再去跑一遍 JS 代碼。使用服務端渲染的網站,可以說是“所見即所得”,頁面上呈現的內容,我們在 html 源文件里也能找到。

優點:

首屏渲染快、利於SEO、可以生成緩存片段,生成靜態化文件、節能(對比客戶端渲染的耗電)

缺點:

用戶體驗較差、不容易維護,通常前端改了部分html或者css,后端也需要修改。

客戶端渲染 (CSR)

  1. 解釋: 客戶端渲染模式下,服務端把渲染的靜態文件給到客戶端,客戶端拿到服務端發送過來的文件自己跑一遍js,根據JS運行結果,生成相應DOM,然后渲染給用戶。
  2. 解釋: html 僅僅作為靜態文件,客戶端在請求時,服務端不做任何處理,直接以原文件的形式返回給客戶端客戶端,然后根據 html 上的 JavaScript,生成 DOM 插入 html。
  3. 在這里插入圖片描述
優缺點:

好處:

網絡傳輸數據量小、減少了服務器壓力、前后端分離、局部刷新,無需每次請求完整頁面、交互好可實現各種效果

壞處:

不利於SEO、爬蟲看不到完整的程序源碼、首屏渲染慢(渲染前需要下載一堆js和css等)

VS

其實前后端的渲染本質是一樣的,都是字符串的拼接,將數據渲染進一些固定格式的html代碼中形成最終的html展示在用戶頁面上。 因為字符串的拼接必然會損耗一些性能資源。
如果在服務器端渲染,那么消耗的就是server端的性能。
如果是在客戶端渲染,常見的手段,比如是直接生成DOM插入到html 中,或者是使用一些前端的模板引擎等。他們初次渲染的原理大多是將原html中的數據標記(例如{{text}})替換。
使用服務端的優勢

事實上,很多網站是出於效益的考慮才啟用服務端渲染,性能倒是在其次。
假設 A 網站頁面中有一個關鍵字叫“前端性能優化”,這個關鍵字是 JS 代碼跑過一遍后添加到 HTML 頁面中的。那么客戶端渲染模式下,我們在搜索引擎搜索這個關鍵字,是找不到 A 網站的——搜索引擎只會查找現成的內容,不會幫你跑 JS 代碼。A 網站的運營方見此情形,感到很頭大:搜索引擎搜不出來,用戶找不到我們,誰還會用我的網站呢?為了把“現成的內容”拿給搜索引擎看,A 網站不得不啟用服務端渲染。
但性能在其次,不代表性能不重要。服務端渲染解決了一個非常關鍵的性能問題——首屏加載速度過慢。在客戶端渲染模式下,我們除了加載 HTML,還要等渲染所需的這部分 JS 加載完,之后還得把這部分 JS 在瀏覽器上再跑一遍。這一切都是發生在用戶點擊了我們的鏈接之后的事情,在這個過程結束之前,用戶始終見不到我們網頁的廬山真面目,也就是說用戶一直在等!相比之下,服務端渲染模式下,服務器給到客戶端的已經是一個直接可以拿來呈現給用戶的網頁,中間環節早在服務端就幫我們做掉了,用戶豈不“美滋滋”?

通過服務端渲染的概念以及它的兩個特點:首屏加載速度快、SEO優化。
我們知道,服務端渲染其實就是由瀏覽器做的一些事情,我們放到了服務端去做,那么對於掘金、簡書、CSDN、知乎等網站的搭建,這種在網上一搜搜出一堆東西的網站,SEO做的很好,應該多少都用到服務端渲染了吧?當然,做服務端渲染成本是高昂的。
vue全家桶或者react全家桶,都是推薦通過服務端渲染來實現路由的。
服務端渲染並非完全之策(服務器稀少而寶貴),關於首屏渲染體驗以及SEO的優化方案很多,在不使用服務端渲染這個操作下,我們最好的處理方式就是找尋替代優化方案。
關於在server端還是在browser端渲染的選擇,更多的是要看業務場景。

為什么現在又流行服務器端渲染html?https://blog.csdn.net/b9q8e64lo6mm/article/details/79418969


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM