客戶端渲染
現代化的服務端渲染 優點
1.1 使用者體驗好
1.2 開發效率高
1.3渲染效能好
1.4可維護性好
缺點2.1 首屏渲染時間長 => 與傳統伺服器端渲染直接獲取服務端直接渲染好的html不同,單頁面應用使用js在客戶端生成html來呈現網頁內容,使用者需要等待客戶端js解析執行完才能看到頁面,這樣就使得首屏載入時間長,從而影響使用者體驗
2.2 不利於seo=>因為當搜尋引擎爬蟲**html檔案的時候,單頁面的html是沒有內容的,因為它需要通過客戶端js解析執行完才能夠生成網頁內容,而目前的主流搜尋引擎對於這一部分內容的抓取還不是很好
相關概念
const express = require("express")
const fs = require("fs")
// 模板引擎實際上就是字串的替換
const template = require("art-template")
// 1. 獲取頁面模板
const templatestr = fs.readfilesync("./index.html", "utf-8");
// 2. 獲取資料
const data = json.parse(fs.readfilesync("./data.json", "utf-8"))
// 3. 渲染: 資料 + 模板 = 最終結果
const html = template.render(templatestr, data)
// 4. 把渲染結果傳送給客戶端
res.send(template)
}) console.log("啟動伺服器成功")
})
缺點:
前後端**完全耦合在一起,不利於開發和維護=> 頁面的渲染放到客戶端渲染處理,這樣的話**及人員的職責就可以實現劃分,也就是說後端只需要負責資料的處理,給前端提供介面,而前端主要負責檢視渲染的處理,這樣的話我們就能極大提高專案的開發效率及可維護性
服務端壓力大=> 渲染的工作分散到客戶端
使用者體驗一般=> 傳統的服務端渲染,我們要檢視不同的頁面,那麼每個頁面都要去完整的重新整理,體驗不夠友好,客戶端渲染的話,單頁面spa這種無重新整理體驗相比傳統的服務端渲染體驗好很多
客戶端解決了伺服器端渲染的問題,但也存在一些明顯的不足
前面了解到客戶端渲染有兩個比較突出的缺點
解決辦法:現代化的服務端渲染 => 同構渲染
同構渲染 = 後端渲染 + 前端渲染
核心解決seo和首屏渲染慢的問題
擁有傳統服務端渲染的優點,也有客戶端渲染的優點
如何實現同構渲染
使用vue,react等框架的官方解決方案
使用第三方解決方案
接下來我們以vue生態中的nuxt.js為例演示同構渲染應用
同構渲染的問題
涉及構建和部署的要求更多
更多的服務端負載
react 伺服器端渲染
伺服器端渲染 vs 客戶端渲染 1.伺服器端渲染需要消耗更多的伺服器資源 cpu，記憶體等 2.客戶端渲染可以將靜態資源部署到cdn上，實現高併發 3.服務端渲染對seo更友好 react 伺服器端渲染的實現 1.構建編譯與執行環境 安裝 babel node npm install babel c...
伺服器端渲染和客戶端渲染
網際網路早期，使用者使用瀏覽器瀏覽的都是一些沒有複雜邏輯的 簡單的頁面，這些頁面都是在後端將html拼接好的然後將之返回給前端完整的html檔案，瀏覽器拿到這個html檔案之後就可以直接解析展示了，而這也就是所謂的伺服器端渲染了。而隨著前端頁面的複雜性提高，前端就不僅僅是普通的頁面展示了，而可能新增...
伺服器端渲染和客戶端渲染
不知什麼時候腦海裡突然冒出個問題，當輸入乙個 時，展現在我們眼前的資料從何而來？然後想呀想，查呀查,隨之引入了第乙個概念就是伺服器端渲染和客戶端渲染.1.什麼是伺服器端和客戶端？伺服器端 顧名思義是提供服務的，接收客戶端發出的請求，然後於response作為回應。客戶端 同理，客戶 是發請求的那一方...