服務端渲染總結

2022-02-03 03:42:29 字數 928 閱讀 2833

1. 服務端渲染2個優點 和 缺點

1.1 服務端渲染可以減少白屏時間

服務端渲染,客戶端接收到html,可以直接顯示

客戶端渲染,客戶端接收到html,解析完畢,還要向服務端去請求js檔案,返回後,執行完js,才能顯示完成

因此,服務端渲染,白屏時間短。

1.2 服務端渲染利於seo

有清晰的html結構,而不是後來用js插入的結構,利於爬蟲爬取有效資訊。

1.3 服務端渲染缺點

1. 增加了服務端的資源消耗和維護成本

2. 不利於前後端分離,需要前端來維護乙個模板層

2. 常見框架的服務端渲染

2.1. react服務端渲染

1. 只有componentwillmount和render會在服務端呼叫,其他週期均在客戶端呼叫

2. react服務端渲染api的區別

rendertostring 渲染出來的dom帶有data-reactid屬性,如此,客戶端react.js就可以認識服務端渲染好的內容,

不會重新渲染dom,繼續執行後面的生命週期和事件繫結等服務端不能完成的任務。

rendertostaticmarkup 渲染出來的dom不帶有data-reactid屬性,可以節省一點流量。但是客戶端的react.js不能認識

服務端渲染好的內容,會抹掉之前服務端渲染的頁面,重新渲染dom,可能會造成頁面閃動。客戶端

render方法會用innerhtml重寫掛載點內的內容

2.2. vue服務端渲染

1. 只有 beforecreate 和 created 會在服務端呼叫。其他週期均只能在客戶端呼叫

服務端渲染or預渲染

今天木有引言嚶嚶嚶 瀏覽器核心分兩個部分 渲染引擎 js引擎 解析html以構建dom樹 構建render樹 布局render樹 繪製render樹 不過有三個點需要注意 雖然能夠很快渲染出頁面,但是沒有執行react時頁面無法進行互動 獲取第乙個位元組時會更加慢一點,由於ssr需要將完整的渲染過的...

Node art template服務端渲染

http 模組 檔案處理模組 var fs require fs 建立服務例項 檔案路徑 var pathdir d hbuiderprojects nodejslearn resoure 監聽客戶端請求 server.on request function req,res console.log ...

Next Js 服務端渲染實戰

2.開發類 3.其他問題 專案中使用的是純ssr方案,以下非特指不包含靜態匯出方案 專案開發中使用gitlab的cicd 做持續整合,docker部署,靜態檔案存放阿里雲oss。有兩個目錄可以使用cdn 部署。乙個是打包生成的 next static目錄。乙個是專案目錄中的static目錄。next...