前端開發進化史

了解SSR之前，需要知道最原始的服務器渲染、前后端一起開發。使用用一個服務器。原始的服務器渲染是整個web項目放入后端，提供路由訪問。好處壞處也很多，舉例：MVC模式。JavaWeb

原始服務渲染

優點：

安全性：因為整個項目都在后端同一個服務器里。通過后端控制層提供路由訪問

首屏加載快：這樣瀏覽器不會太大工作，只需要接受后端返回回來html渲染

缺點：

不方便協同開發： 前后端開發困難，繁瑣不方便，可能需要等待后端或者前端進度

前端代碼量：前端還行需要自己編寫模板語句。jstl，ejs等…

維護難：隨著項目增大頁面的控制維護成本也會越來越大

體驗不足: 每次頁面的切換需要重新請求在渲染

隨著時代的變更。為了讓開發更加高效，而且有更好的體驗和維護成為。衍生出了前后端分離模式

意思就是：前端是一個單獨模塊單獨服務器，后端也是單獨模塊單獨服務器。兩者之間通過跨域訪問接口接口方式進行數據交互。大大提升了項目開發效率。比如較流行的 SPA單頁面程序

SPA單頁面瀏覽渲染

優點：

維護成本低：前端后端后只需要維護之間關注的功能。

協同開發： 前端不需要等后端，后端也不需要等前端，個做個的事。

體驗好： 可以做到接近原生軟件效果，因為始終都是一個頁面。而且一次性把所以頁面請求到了，后面頁面只需要請求一次或者不請求，也能訪問到

缺點：

SEO不友好： 因為頁面中只有一個div。比如vue：div id=“app”, 其他頁面是通過js操作生成頁面。而SEO是爬取html的。不回爬取js

首屏加載慢： 由于更多加載及渲染工作都在瀏覽器端執行，比如：請求一個網站，瀏覽需要發出請求，獲取到js，執行js獲取到頁面，在執行渲染頁面，然后包括圖片，css等。都需要大量和后端往返；

性能問題： 由于更多加載及渲染工作都在瀏覽器端執行、單頁面訪問頁面步驟： 先執行js —> 生成DOM —》渲染DOM —》發出請求回來—》解析數據—》操作數據—》重新渲染

隨著人們的需求升級，為了彌補缺點的不足。我們有推行了新模式 SSR服務端渲染 這個傳統的MVC有一些相似，但具體又不同。他的出現解決了SPA單頁面程序的問題，但是自身還有其他問題。看我們是怎么業務，在選擇適合的方式。說說SSR缺點優點：

SSR服務端渲染

優點：

更好的SEO： 由于搜索引擎爬蟲抓取的工具可以直接查看完全渲染的頁面

首屏加載快： 瀏覽器工作量大大減少，部分工作交給后端渲染執行創建

缺點：

項目復雜度： 由于需要做node中間處理，需要更多文件處理分服務，和瀏覽端文件

依賴性： SSR需要webpack做打包文件打包分離處理及node Server運行環境。條件成本

更多的服務器端負載： 在 Node.js 中渲染完整的應用程序，顯然會比僅僅提供靜態文件的 server 更加大量占用 CPU 資源

SPA單頁面程序和 SSR應用場景

單頁適用場景：后臺管理項目，大量路由項目，

SSR適用場景： 官網，推廣頁

• 比如你一個儀表板項目。初始加載時間對你不是很重要，那么就不用考慮SSR，這需要你開發權衡。看你的項目內容需要展示的時間來判斷

• 如何你項目中希望部分頁面(登錄頁、介紹頁)。有良好加載快又能SEO。那么推薦你使用 預渲染

  預渲染什么？(https://ssr.vuejs.org/zh/#%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-vs-%E9%A2%84%E6%B8%B2%E6%9F%93-ssr-vs-prerendering)

  Vue中如何使用。推薦看著篇文章： Vue預渲染案例(https://juejin.im/post/59d49d976fb9a00a571d651d#heading-9)

總結

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

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