網頁開發方式-從靜態頁面到服務端渲染

前言

網頁的最初形式就是一個個靜態頁面，例如咱們寫了一個 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）。此方式一些適合的項目：活動模板，新聞通知類，博客系統，混合開發等等。

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

關注大詩人公衆號，第一時間獲取最新文章。