網頁的最初形式就是一個個靜态頁面，例如我們寫了一個 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。 它不僅使我們統一了技術棧，還解決了單頁面本身的一些問題，以至于我們能在某些場景下得到滿足。
基于整個發展史，我在這裡暫且把網頁的開發方式劃分為這四個類型：傳統的靜态頁面、傳統的動态頁面、單頁面、單頁面的服務端渲染。
接下來我們從下面幾個方面，來談一談每一種開發方式
主要涉及技術
實作和執行過程
開發效率
加載速度
服務端壓力
應用場景
html-css-js
将靜态資源存放在伺服器，使用者通過 url 通路靜态資源并加載到浏覽器，最後渲染
引入資源少，開發速度快，對于複雜應用開發效率極低
伺服器隻需要傳回靜态資源，響應流程簡單，速度非常快
伺服器壓力小，占用很少資源
僅支援展示少量資訊的網頁，互動較少，比如簡單的介紹頁面，官方網站，個人履歷網頁等。
html-css-js、ajax、資料庫、後端程式及相關模版引擎
運作後端程式并監聽路由（請求路徑），使用者通路對應路由後端渲染對應的頁面，執行相關 sql 并傳回資料，模版引擎将資料插入到 html 節點中，傳回 html，浏覽器渲染
開發效率較高，mvc模式，需要搭建耦合的前後端架構，模版引擎後端渲染部分和前端 ajax 通過 js 渲染部分需要額外編碼處理。如果後端遷移語言，幾乎等于重寫。前後端職責并不是特别分明，後端程式員也可以修改模闆。
服務端程式需要監聽路由，同步請求接口，渲染模闆，響應流程較多，加載速度較快
伺服器需要啟動後端程式，後端程式需要請求資料和渲染頁面，占用記憶體和計算資源較多
内容豐富，複雜互動的動态網頁，适合全棧開發。也有一種動靜結合的應用場景，後端程式根據路由，把頁面動态渲染後生成一個靜态的頁面，定期更新此靜态頁面，這樣使用者通路的時候，就直接通路的是靜态頁面，能很大程度減少伺服器壓力。缺點是更新不及時,是一種類似緩存的政策，使用此方式還是根據應用場景綜合評估。
html-css-js、單頁面架構、ajax
伺服器直接傳回靜态資源，浏覽器加載執行相關 js，單頁面架構判斷路由執行對應 js 代碼，所有請求異步，完全通過 js 插入和修改 dom ，不需要服務端做任何事情。
開發效率較高，mvvm模式，前後端分離完全獨立的純前端應用，前後端職責分明互不幹涉。
無靜态資源緩存情況下，首次加載速度較慢，因為需要經曆靜态資源下載下傳、js 完全執行、異步資料傳回。首次加載完成後頁面路由被前端控制，切換非常快。緩存靜态資源以後，首次加載速度也非常快。
伺服器壓力很小，隻需要傳回靜态資源，網頁邏輯、路由和計算全部分攤給無數用戶端。
内容豐富、資料量大、複雜互動的動态網頁。大部分場景都能滿足，是目前最流行的方式。
注：之是以沒有直接使用 SSR（服務端渲染）來表示，是因為動态網頁也可以叫服務端渲染。
html-css-js、單頁面架構、ajax、nodejs、基于node和單頁面架構自行實作核心邏輯 或者 使用三方架構如nextjs、nuxtjs
使用者通路 url， node 攔截到路由，并根據路由渲染對應單頁面元件生成 dom 字元串，如果有資料請求，同步擷取到資料後才渲染出 dom 字元串，插入到 html 中傳回用戶端，用戶端很快顯示出界面，至此服務端渲染完成。用戶端 body 後的 script 标簽加載單頁面相關 js 檔案，而後用戶端進行一次單頁面同構，完成對應元件 dom 的事件綁定及那些伺服器端無法實作的功能，後續的互動和程式執行就完全是一個單頁面應用。
開發效率相對于單頁面要低一些，因為額外要處理的邏輯變得比較多，比如 node 沒有 window 對象等等。也會有應用方案本身的一些小坑，以及需要花成本學習 next 等架構。
首次加載速度比較快，因為很快就能先呈現出頁面（但是同構未完成時功能受限）。如果沒有緩存的情況下，首次加載速度 SSR 是優于單頁面的，如果 js 被緩存，反而單頁面會快一點。因為 SSR 會多一點服務端的流程開銷。
相比純單頁面，伺服器需要增加 node 服務帶來的消耗。而伺服器壓力會比動态頁面少很多，因為僅僅是使用者第一次通路的時候才是服務端渲染，而後路由改變頁面渲染都是被單頁面控制。
内容豐富，複雜互動的動态網頁，對首屏加載有要求的項目，對 seo 有要求的項目（因為服務端第一次渲染的時候，已經把關鍵字和标題渲染到響應的 html 中了，爬蟲能夠抓取到此靜态内容，是以更利于 seo）。此方式一些适合的項目：活動模闆，新聞通知類，部落格系統，混合開發等等。
文章若有錯誤，歡迎指出，以便修改～
分享一個朋友的人工智能教程。零基礎！通俗易懂！風趣幽默！段子多！大家可以看看是否對自己有幫助【點選前往】
有沒有人打賞？沒有的話，那我晚點再來問問。
關注大詩人公衆号，第一時間擷取最新文章。
如果你有購買鋼琴的打算，可以從這裡了解到在售資訊，價格實惠品質保障。
---轉發請标明，并添加原文連結---