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 因為訪問...