前言

網頁的最初形式就是一個個靜態頁面，例如我們寫了一個 html 檔案，放在伺服器上就可以供使用者訪問了。 而後網站變得需要展示更多的內容，讓內容更加動態，因此需要接入資料庫，配合資料庫的內容做展示，於是誕生了 html 模板引擎，用於把動態的資料插入到 html 中，叫做動態頁面，後面我會叫它為傳統的動態頁面，例如 java 的 Jsp，php 的 Smarty 和 node 的 Jade 等。 再後來伴隨瀏覽器的發展，網頁互動變得越來越複雜等一系列原因，前端技術突飛猛進，誕生了前後端分離的單頁面應用，簡稱 spa（single page application），最流行的莫過於 react、angular 和 vue了，三大框架一統江湖。 單頁面應用也有其自身的缺陷，seo不友好、首次載入較慢，但是大家又不可能回過頭去使用模版引擎，於是乎基於單頁面應用框架的 SSR（sever side rendering）服務端渲染應運而生，例如基於 vue 的 nuxt.js 和基於 react 的 next.js。 它不僅使我們統一了技術棧，還解決了單頁面本身的一些問題，以至於我們能在某些場景下得到滿足。

基於整個發展史，我在這裡暫且把網頁的開發方式劃分為這四個型別：傳統的靜態頁面、傳統的動態頁面、單頁面、單頁面的服務端渲染。

接下來我們從下面幾個方面，來談一談每一種開發方式

• 主要涉及技術
• 實現和執行過程
• 開發效率
• 載入速度
• 服務端壓力
• 應用場景

傳統的靜態頁面

1.主要涉及技術

html-css-js

2.實現和執行過程

將靜態資源存放在伺服器，使用者通過 url 訪問靜態資源並載入到瀏覽器，最後渲染

3.開發效率

引入資源少，開發速度快，對於複雜應用開發效率極低

4.載入速度

伺服器只需要返回靜態資源，響應流程簡單，速度非常快

5.伺服器壓力

伺服器壓力小，佔用很少資源

6.應用場景

僅支援展示少量資訊的網頁，互動較少，比如簡單的介紹頁面，官方網站，個人簡歷網頁等。

傳統的動態頁面

1.主要涉及技術

html-css-js、資料庫、後端程式及相關模版引擎

2.實現和執行過程

執行後端程式並監聽路由（請求路徑），使用者訪問對應路由後端渲染對應的頁面，執行相關 sql 並返回資料，模版引擎將資料插入到 html 節點中，返回 html，瀏覽器渲染

3.開發效率

開發效率較高，mvc模式，需要搭建耦合的前後端架構，模版引擎後端渲染部分和前端 ajax 通過 js 渲染部分需要額外編碼處理。如果後端遷移語言，幾乎等於重寫。前後端職責並不是特別分明，後端程式設計師也可以修改模板。

4.載入速度

服務端程式需要監聽路由，同步請求介面，渲染模板，響應流程較多，載入速度較快

5.伺服器壓力

伺服器需要啟動後端程式，後端程式需要請求資料和渲染頁面，佔用記憶體和計算資源較多

6.應用場景

內容豐富，複雜互動的動態網頁，適合全棧開發。也有一種動靜結合的應用場景，後端程式根據路由，把頁面動態渲染後生成一個靜態的頁面，定期更新此靜態頁面，這樣使用者訪問的時候，就直接訪問的是靜態頁面，能很大程度減少伺服器壓力。缺點是更新不及時,是一種類似快取的策略，使用此方式還是根據應用場景綜合評估。

單頁面

1.主要涉及技術

html-css-js、單頁面框架

2.實現和執行過程

伺服器直接返回靜態資源，瀏覽器載入執行相關 js，單頁面框架判斷路由執行對應 js 程式碼，所有請求非同步，完全通過 js 插入和修改 dom ，不需要服務端做任何事情。

3.開發效率

開發效率較高，mvvm模式，前後端分離完全獨立的純前端應用，前後端職責分明互不干涉。

4.載入速度

無靜態資源快取情況下，首次載入速度較慢，因為需要經歷靜態資源下載、js 完全執行、非同步資料返回。首次載入完成後頁面路由被前端控制，切換非常快。快取靜態資源以後，首次載入速度也非常快。

5.伺服器壓力

伺服器壓力很小，只需要返回靜態資源，網頁邏輯、路由和計算全部分攤給無數客戶端。

6.應用場景

內容豐富、資料量大、複雜互動的動態網頁。大部分場景都能滿足，是目前最流行的方式。

單頁面的服務端渲染

注：之所以沒有直接使用 SSR（服務端渲染）來表示，是因為動態網頁也可以叫服務端渲染。

1.主要涉及技術

html-css-js、單頁面框架、nodejs、基於node和單頁面框架自行實現核心邏輯 或者 使用三方框架如nextjs、nuxtjs

2.實現和執行過程

使用者訪問 url， node 攔截到路由，並根據路由渲染對應單頁面元件生成 dom 字串，如果有資料請求，同步獲取到資料後才渲染出 dom 字串，插入到 html 中返回客戶端，客戶端很快顯示出介面，至此服務端渲染完成。客戶端 body 後的 script 標籤載入單頁面相關 js 檔案，而後客戶端進行一次單頁面同構，完成對應元件 dom 的事件繫結及那些伺服器端無法實現的功能，後續的互動和程式執行就完全是一個單頁面應用。

3.開發效率

開發效率相對於單頁面要低一些，因為額外要處理的邏輯變得比較多，比如 node 沒有 window 物件等等。也會有應用方案本身的一些小坑，以及需要花成本學習 next 等框架。

4.載入速度

首次載入速度比較快，因為很快就能先呈現出頁面（但是同構未完成時功能受限）。如果沒有快取的情況下，首次載入速度 SSR 是優於單頁面的，如果 js 被快取，反而單頁面會快一點。因為 SSR 會多一點服務端的流程開銷。

5.伺服器壓力

相比純單頁面，伺服器需要增加 node 服務帶來的消耗。而伺服器壓力會比動態頁面少很多，因為僅僅是使用者第一次訪問的時候才是服務端渲染，而後路由改變頁面渲染都是被單頁面控制。

6.應用場景

內容豐富，複雜互動的動態網頁，對首屏載入有要求的專案，對 seo 有要求的專案（因為服務端第一次渲染的時候，已經把關鍵字和標題渲染到響應的 html 中了，爬蟲能夠抓取到此靜態內容，因此更利於 seo）。此方式一些適合的專案：活動模板，新聞通知類，部落格系統，混合開發等等。

文章若有錯誤，歡迎指出，以便修改～