服務端渲染SSR的理解

2022-01-10 08:55:07 字數 1774 閱讀 6657

ssr服務端渲染server side render就是當進行請求時,頁面上的內容是通過服務端渲染生成的,瀏覽器直接顯示服務端返回的html即可。

通常在構建乙個普通的spa單頁應用時,就是構建的客戶端渲染的應用,csr客戶端渲染client side render就是當進行請求時,頁面上的內容是通重載入的js檔案渲染出來的,js檔案動態執行在瀏覽器上面,服務端只返回乙個html模板。

ssr服務端渲染server side render就是當進行請求時,頁面上的內容是通過服務端渲染生成的,瀏覽器直接顯示服務端返回的html即可。對於傳統服務端渲染,也稱為後端模板渲染,如jsp或者php等,這是最早時期的web,是指客戶端請求時,在伺服器上使用模板引擎將模板與資料拼接成完整的html,再傳送給客戶端,客戶端接收後直接解析html就可以在瀏覽器上展示出來,不需要額外的非同步請求獲取資料,如果要使web有互動性,客戶端需要再用js去操作dom或者渲染其他動態的部分。

如果使用伺服器端渲染ssr只是用來改善少數營銷頁面,例如//about/contact等的seo,那麼你可能需要預渲染,無需使用web伺服器實時動態編譯html,而是使用預渲染方式,在構建時build time簡單地生成針對特定路由的靜態html檔案。如果使用webpack,則可以使用prerender-spa-plugin輕鬆地新增預渲染。

本質上對於渲染都是一樣的,都是進行的字串拼接生成html,兩者的差別最終體現在時間消耗以及效能消耗上。客戶端在不同網路環境下進行資料請求,客戶端需要經歷從js載入完成到資料請求再到頁面渲染這個時間段,導致了大量時間的消耗以及瀏覽器效能的消耗。而服務端在內網請求,資料響應快,不需要等待js**載入,可以先請求資料再渲染可視部分然後返回給客戶端,客戶端再做二次渲染,這樣大部分消耗的是服務端的效能,客戶端頁面響應時間也更快。

ssr服務端渲染主要解決的是首屏渲染和seo優化,是否需要ssr服務端渲染主要取決於seo對於**是否非常重要以及內容到達時間time-to-content對應用程式的重要程度。例如,如果你正在構建乙個內部儀錶盤,初始載入時的額外幾百毫秒並不重要,這種情況下去使用伺服器端渲染ssr將是乙個小題大作之舉。然而如果大量的訪問流量來自於搜尋引擎的抓取,那麼服務端渲染ssr將是勢在必行的解決方案,或者內容到達時間time-to-content要求是絕對關鍵的指標,在這種情況下伺服器端渲染ssr可以幫助你實現最佳的初始載入效能。總而言之,開發需要根據實際場景尋找解決方案。

VUE基於NUXT的SSR 服務端渲染

server side rendering 服務端渲染 原理 將 html 在服務端渲染,合成完整的 html 檔案再輸出到瀏覽器。適用場景 nuxt 作用就是在 node.js 上進一步封裝,然後省去我們搭建服務端環境的步驟,只需要遵循這個庫的一些規則就能輕鬆實現 ssr。可以作為乙個 node....

服務端渲染SSR的原理與部署

服務端執行前端框架 生成網頁內容,返回客戶端,客戶端啟用為spa。現代化服務端渲染,或稱為同構渲染,應用稱為服務端渲染應用或同構應用 把資料和模板拼接為完整的html檔案 資料渲染發生在服務端 資料渲染發生在客戶端 不利於seo 對於每個路由,首次訪問時都會由伺服器執行動態編譯輸出html檔案,然後...

服務端渲染(SSR)和客戶端渲染(CSR)的區別

一 ssr 服務端渲染 server side render 將元件或頁面通過伺服器生成html字串,再傳送到瀏覽器,簡單理解下來,發了乙個請求,伺服器返回的不是介面資料,而是一整個頁面的html結構,再結合介面之前定義的css把頁面展示出來 vue 伺服器渲染文件。ssr優點 例如seo 因為訪問...