前端對於服務端渲染(SSR)的理解


什么是服務端渲染(SSR)?

  假設有項目需要渲染一個首頁,平時我們的項目啟動后,開始渲染,請求頁面,返回的body為空,然后執行js將html結構注入body中,再結合css來渲染樣式,展現出來。

  而使用了服務端渲染(SSR)后,簡單理解是將組件或頁面通過服務器生成html字符串,再發送到瀏覽器,最后將靜態標記"混合"為客戶端上完全交互的應用程序。渲染時請求頁面,返回的body里已經存在服務器生成的html結構,之后只需要結合css顯示出來。這就節省了訪問時間和優化了資源的請求。

使用SSR后的優點?

  1. 更利於網站的SEO

  2. 更利於首屏頁面的渲染

使用SSR后的局限性?

  1. 服務端壓力較大

  本來是通過客戶端完成渲染,現在統一到服務端node服務去做。尤其是高並發訪問的情況,會大量占用服務端CPU資源。

  2. 開發條件受限

  在服務端渲染中,只會執行到componentDidMount之前的生命周期鈎子,因此項目引用的第三方的庫也不可用其它生命周期鈎子,這對引用庫的選擇產生了很大的限制。

  3. 學習成本相對較高

  除了對本身項目使用的前端框架要熟悉,還需要掌握webpack、node、Koa2等相關技術。相對於客戶端渲染,項目構建、部署過程更加復雜。

部分理解和思路:

  next.js / nuxt.js 可以很好的完成SSR。

  對於toB的項目,SSR無所謂,對於toC的項目,SSR還是必要的。

  用了前端框架,瀏覽器接收到的還是模板和大量的JS,數據需要異步請求過來。所以存在SEO和性能問題。這時候就需要SSR了。

  如果不使用服務器端渲染,一個頁面的展示流程大概就是,瀏覽器先下載html和js,然后到服務器請求json數據,最后根據json生成頁面。

  如果使用服務器端渲染的話,以上步驟都在服務器端執行,也就是說服務器端從自己服務器那里先獲取json,然后生成頁面,最后把生成的頁面輸出成html給瀏覽器下載。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM