服務端渲染Server side rendering

概念：什么是服務端渲染，什么是客戶端渲染

相對于現在 前端開發的 前后分離模式，服務端渲染應該是更早時代的產物；

服務端渲染：在早期的時候，由于頁面比較簡單，前后端分離還沒有做的比較完善，所以當時一般頁面渲染還是在服務端完成html文件的拼裝，然后瀏覽器接收到這個文件，就可以直接解析展示。

客戶端渲染：如今前端頁面的復雜性提高，前端已經不再僅僅是普通的頁面展示了，現在前端頁面功能更加完善，也更加復雜。同時伴隨著ajax的興起，使得現在越來越崇尚前后端分離的開發方式。后端不再提供完整的html頁面，而是提供一些API使得前端可以獲取需要的json數據，然后前端拿到數據后在前端完成html頁面的拼裝，然后展示在瀏覽器上，這就是客戶端渲染。?

如果你做過后端開發，寫過模版引擎，其實這里說的服務端渲染其實就是 后端語言的模版引擎，比如java中的jsp,koa中koa-art-template

---

特性：服務端渲染和客戶端渲染的區別

任何框架或開發形式的選型都應該適配特有的需求場景

1、首先先來了解三個專業名詞：

(1)SPA：單頁面應用：只有一張Web頁面的應用，是一種從Web服務器加載的富客戶端，單頁面跳轉僅刷新局部資源，公共資源僅需加載一次，常用于PC端網站，購物等網站。

? ? ? ? ? 優點：頁面之間切換快，減少了服務器的壓力

? ? ? ? ? ?缺點：首屏打開慢，不利于SEO搜索引擎優化，利用搜索引擎的規則是提高網站在有關搜索引擎的自然排名。

(2)SEO：搜索引擎優化，利用搜索引擎的規則提高網站在有關搜索引擎的自然排名

? ? ? ? ? ? ? ? ? ?因為SPA單頁面應用，是通過AJAX獲取數據，這就難保證我們的頁面能被搜索引擎收到，并且有一些搜索引擎不支持js和通過ajax獲取數據。那就更不用提SEO了，為了解決這個? ? ? ? ? ? ? ? 問 題就產生了SSR。

(3)SSR服務端渲染：SSR的出現一定程度上解決了SPA首屏慢的問題，又極大的減少了SPA對于SEO的不利影響。? ? ? ? ? ?

服務端渲染的優缺點是？

優點：

前端耗時少。因為后端拼接完了html，瀏覽器只需要直接渲染出來。

有利于SEO。因為在后端有完整的html頁面，所以爬蟲更容易爬取獲得信息，更有利于seo。

無需占用客戶端資源。即解析模板的工作完全交由后端來做，客戶端只要解析標準的html頁面即可，這樣對于客戶端的資源占用更少，尤其是移動端，也可以更省電。

后端生成靜態化文件。即生成緩存片段，這樣就可以減少數據庫查詢浪費的時間了，且對于數據變化不大的頁面非常高效 。

缺點：

不利于前后端分離，開發效率低。使用服務器端渲染，則無法進行分工合作，則對于前端復雜度高的項目，不利于項目高效開發。另外，如果是服務器端渲染，則前端一般就是寫一個靜態html文件，然后后端再修改為模板，這樣是非常低效的，并且還常常需要前后端共同完成修改的動作；或者是前端直接完成html模板，然后交由后端。另外，如果后端改了模板，前端還需要根據改動的模板再調節css，這樣使得前后端聯調的時間增加。

占用服務器端資源。即服務器端完成html模板的解析，如果請求較多，會對服務器造成一定的訪問壓力。而如果使用前端渲染，就是把這些解析的壓力分攤了前端，而這里確實完全交給了一個服務器。

客戶端渲染的優缺點是？

優點：

前后端分離。前端專注于前端UI，后端專注于api開發，且前端有更多的選擇性，而不需要遵循后端特定的模板。

體驗更好。比如，我們將網站做成SPA或者部分內容做成SPA，這樣，尤其是移動端，可以使體驗更接近于原生app。

缺點：

前端響應較慢。如果是客戶端渲染，前端還要進行拼接字符串的過程，需要耗費額外的時間，不如服務器端渲染速度快。

不利于SEO。目前比如百度、谷歌的爬蟲對于SPA都是不認的，只是記錄了一個頁面，所以SEO很差。因為服務器端可能沒有保存完整的html，而是前端通過js進行dom的拼接，那么爬蟲無法爬取信息。除非搜索引擎的seo可以增加對于JavaScript的爬取能力，這才能保證seo。

使用服務器端渲染還是客戶端渲染？

還是要根據具體的實際情況進行選擇，比如企業級網站，主要功能是展示而沒有復雜的交互，并且需要良好的SEO，則這時我們就需要使用服務器端渲染；而類似后臺管理頁面，交互性比較強，不需要seo的考慮，那么就可以使用客戶端渲染。

另外，具體使用何種渲染方法并不是絕對的，比如現在一些網站采用了首屏服務器端渲染，即對于用戶最開始打開的那個頁面采用的是服務器端渲染，這樣就保證了渲染速度，而其他的頁面采用客戶端渲染，這樣就完成了前后端分離。

推薦鏈接?：https://www.cnblogs.com/muzishijie/p/11198315.html

總結：

在你的項目SEO優先級較高，前端工程復雜度低的情況下 應該采用SSR架構開發；相反則應該盡量選擇 客戶端渲染

---

開發：背景介紹完畢我們開始進入正題開始開發

一·開發技術背景學習

推薦鏈接? ?1:nuxtjs官網：https://www.nuxtjs.cn/guide/installation

推薦鏈接? ?2:Vue-SSR官網：https://ssr.vuejs.org/zh/guide/universal.html

這里建議 優先 學習 Vue-SSR的一些 代碼書寫背景，但不需要從Vue-SSR官網中的案例進行擼代碼，只需要知道注意事項以及為什么即可，這時再切到nuxt中進行正式開發；

比如：

其次也不要全盤吞下Vue-SSR官網的所有內容，因為與nuxt.js的設計是有出入的；在Vue-SSR官網中作者只是闡述了 基于 Vue實現SSR的 基礎的實現，并不具備足夠的成熟的工程化落地經驗；所以還是要以nuxt文檔為主，比如在 nuxt中的默認路由是由框架 自動生成的，不需要開發者去手動配置等；

---

二·安裝等前置條件執行：

1.首先根據 官方文檔指引 進行安裝

2.選擇配置項并初始化工程

---

三·調試 run dev

1.我在這里偷懶直接 采用了官方介紹中間件的demo

下載鏈接?：https://github.com/nuxt/example-auth0

2.紅色箭頭標注的是 項目 預覽地址

該頁是瀏覽器打開后的效果圖；可以看到我在上文中index.vue文件中 下方寫到了 hi~ 文本， 并用nuxt-link>標簽進行包裹；這是Nuxt推薦的路由方式；相應的我們應在 /auth/sayhi 目錄下寫下對應的文件

這是click hi~ 之后所進入到了http://localhost:49322/auth/sayhi 頁面；

至此，我們基礎的安裝、運行、調試 已經ok

四·文件目錄結構

1.同樣，需要參照官方文檔指引，來搞清楚整個工程結構及各模塊功能

2.這里推薦優先搞懂 中間件目錄以及頁面目錄

中間件目錄相當于相應頁面的路由守衛方法

至此，基礎的基于Nuxt的ssr前端工程落地 開發調試階段已經完成；

部署：如何部署SSR項目

部署文檔

https://www.jianshu.com/p/2b1510e92a46

PM2-node進程管理程序

https://www.cnblogs.com/wangcp-2014/p/10874417.html

一·連接至目標服務器

1.SSR顧名思義，是要將我們開發好的前端代碼 push 到服務器的；第一步就是要連接到目標服務器

二·將開發好的前端代碼push到服務器并在服務器上進行工程的初始化 并啟動

push形式分兩種，一種是將代碼打包后push上去，另外一種是將整個工程push上去，但需要注意的是都要將node_modus依賴包刪除掉，并在服務器上進行工程的初始化 并啟動

結尾：至此基于Vue-SSR-Nuxt.js的入門介紹已經完畢；

雖然本文寫的不夠深入，本文主要是帶領讀者進入Nuxt的基礎開發，想Nuxt涉及到的許多原理是基于服務端開發的，究其原理就像模版引擎，如果擼過服務端代碼的小伙伴一定不會陌生；

如果你覺得本文對你對SSR的了解有所幫助

請 點贊、關注、轉發、收藏 吧，你的支持是博主前進的動力！

?? 原文鏈接 ???

?? 原文鏈接 ???

?? 原文鏈接 ??

總結

以上是生活随笔為你收集整理的js模板引擎_VueSSRNuxt.js的全部內容，希望文章能夠幫你解決所遇到的問題。

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