前言
網頁的最初形式就是一個個靜態頁面，例如我們寫了一個 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、ajax、數據庫、后端程序及相關模版引擎
2.實現和執行過程
運行后端程序並監聽路由（請求路徑），用戶訪問對應路由后端渲染對應的頁面，執行相關 sql 並返回數據，模版引擎將數據插入到 html 節點中，返回 html，瀏覽器渲染
3.開發效率
開發效率較高，mvc模式，需要搭建耦合的前后端架構，模版引擎后端渲染部分和前端 ajax 通過 js 渲染部分需要額外編碼處理。如果后端遷移語言，幾乎等於重寫。前后端職責並不是特別分明，后端程序員也可以修改模板。
4.加載速度
服務端程序需要監聽路由，同步請求接口，渲染模板，響應流程較多，加載速度較快
5.服務器壓力
服務器需要啟動后端程序，后端程序需要請求數據和渲染頁面，占用內存和計算資源較多
6.應用場景
內容豐富，復雜交互的動態網頁，適合全棧開發。也有一種動靜結合的應用場景，后端程序根據路由，把頁面動態渲染后生成一個靜態的頁面，定期更新此靜態頁面，這樣用戶訪問的時候，就直接訪問的是靜態頁面，能很大程度減少服務器壓力。缺點是更新不及時,是一種類似緩存的策略，使用此方式還是根據應用場景綜合評估。
單頁面
1.主要涉及技術
html-css-js、單頁面框架、ajax
2.實現和執行過程
服務器直接返回靜態資源，瀏覽器加載執行相關 js，單頁面框架判斷路由執行對應 js 代碼，所有請求異步，完全通過 js 插入和修改 dom ，不需要服務端做任何事情。
3.開發效率
開發效率較高，mvvm模式，前后端分離完全獨立的純前端應用，前后端職責分明互不干涉。
4.加載速度
無靜態資源緩存情況下，首次加載速度較慢，因為需要經歷靜態資源下載、js 完全執行、異步數據返回。首次加載完成后頁面路由被前端控制，切換非常快。緩存靜態資源以后，首次加載速度也非常快。
5.服務器壓力
服務器壓力很小，只需要返回靜態資源，網頁邏輯、路由和計算全部分攤給無數客戶端。
6.應用場景
內容豐富、數據量大、復雜交互的動態網頁。大部分場景都能滿足，是目前最流行的方式。
單頁面的服務端渲染
注：之所以沒有直接使用 SSR（服務端渲染）來表示，是因為動態網頁也可以叫服務端渲染。
1.主要涉及技術
html-css-js、單頁面框架、ajax、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）。此方式一些適合的項目：活動模板，新聞通知類，博客系統，混合開發等等。
文章若有錯誤，歡迎指出，以便修改～