服務端渲染與前端渲染以及node同構直出

2021-10-07 06:49:18 字數 574 閱讀 7441

簡單理解可以是:前後端不分離,

優點:頁面效能好,有利於seo,

缺點:前後端不分離,資料維護難度大

前端渲染就是利用ajax去拿取後端資料,前端頁面結構脫離伺服器,不需要伺服器返回html,css,js等。

優點:結構清晰,各司其職

缺點,:頁面載入速度依賴於js的載入速度(與服務端渲染對比)

大名鼎鼎的node,也是js。當前後端都使用js寫,就可以實現資料,元件,還有一些方法前後端公用,天下和平,歌舞昇平。

如何實現前後端內容共享?

資料共享:對於前後端相同的虛擬dom,服務端使用rendertonodestream ,將結果以流的形式返回,這樣就不用等到html都渲染出來才能給客戶端顯示結果,。同時,在瀏覽器端,使用 hydrate 把虛擬 dom 渲染為真實的 dom 元素。若瀏覽器端對比服務端渲染的元件數,若發生不一致的情況時,不再直接丟掉全部的內容,而是進行區域性的渲染。因此在使用服務端的渲染過程中,要保證前端後元件資料的一致性。這裡將服務端請求的資料,插入到 js 的全域性變數中,隨著 html 一起渲染到瀏覽器端(脫水);這是在瀏覽器端,就可以拿到脫水的資料來初始化元件,新增互動等等(注水)。

服務端渲染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 ...

服務端渲染總結

1.服務端渲染2個優點 和 缺點 1.1 服務端渲染可以減少白屏時間 服務端渲染,客戶端接收到html,可以直接顯示 客戶端渲染,客戶端接收到html,解析完畢,還要向服務端去請求js檔案,返回後,執行完js,才能顯示完成 因此,服務端渲染,白屏時間短。1.2 服務端渲染利於seo 有清晰的html...