理解

• 本質上，服務端渲染其實是生成了應用程序的“快照”，將vue及其對應的庫運行在服務端，令其去訪問接口去預加載數據，然后將獲取到的數據作為組件的初始狀態
• 首先拉取數據，此后，組件的beforeCreate和created生命周期會在服務端調用，初始化完成后將生成的html字符串交由客戶端瀏覽器托管，繼續進行掛載，從而實現前后端同構

優點

• 由于搜索引擎爬蟲抓取工具可以直接查看到已經完全渲染了的頁面，所以可以達到更好的 SEO
• 可以具備更快的首屏內容到達時間，特別是對于緩慢的網絡情況或運行緩慢的設備比如弱網絡下的移動端來說極為友好

缺點

• 復雜度較高，瀏覽器特定的代碼，只能在某些生命周期鉤子函數中使用，一些外部擴展庫可能需要特殊處理，才能在服務器渲染應用程序中運行
• 性能方面有較大問題，每一個請求都對應著多個新的實例的創建，就導致了對服務端資源的占用較大
  • 解決方案1 多級別緩存
    • node server ：通過協商的用戶過期期限，去判斷是否重新渲染頁面
    • nginx：通過標記等判斷頁面是否過期，從而決定是否讓node server重新渲染頁面
  • 解決方案2 降級
    • 當服務器的cpu、內存等達到某一界線時，可以直接變成spa版本而不是服務端渲染
• 與可以部署在任何靜態文件服務器上的完全靜態單頁面應用程序(SPA)不同，服務器渲染應用程序，需要處于 Node.js server 運行環境

場景

• seo
  • 在只是企業官網或者只有幾個頁面需要做seo這種情況下，可以用預渲染pre-render來對這幾個頁面做單獨的處理，也就達到了seo的目的
  • 已經存在的項目，想要去修改服務端渲染有點不大可行，可以通過User Agent 判斷請求來源，如果是搜索引擎的爬蟲利用爬蟲工具如Puppeteer去獲取spa生成html返回給客戶端，做一個模擬的服務端渲染，如果是正常用戶就還是通過spa的方式
  • 全新項目可以運用更加完善的工具框架去實現服務端渲染，如nuxt.js去搭建項目完成項目

總結

以上是生活随笔為你收集整理的对vue服务端渲染的理解以及其使用场景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。