網頁靜態化，是為了加速網頁的訪問，提高網站的負載，利於搜尋引擎抓取。

靜態頁面是指頁面上的內容是死的，不會變的；如果網站的頁面是純 html 頁面的話，當用戶訪問頁面不需要經過資料的讀取和處理，就能得到檔案，所以訪問速度會非常的快，相同的伺服器資源，靜態頁面可以支援更高的訪問量；純靜態的網頁對搜尋引擎友好，容易被搜尋引擎收錄，動態網頁中的 [?] 讓搜尋引擎很難辦，因為它可能從資料庫中把所有的資料都抓取出來，所以搜尋引擎通常不抓取 url 中 [?] 以後的內容；因為是靜態頁面，所以也不會存在 SQL 注入之類的問題；

靜態頁面都是一個一個的 html 檔案，如果網站內容更新的頻率比較高的話，就會生成或更新大量的檔案，如果靜態頁面的模板需要變化的時候，這個更新量就更恐怖了；另外靜態頁面的互動性比較差。

動態頁面是指頁面上的內容是活的，可能是從資料庫中讀取出來的，或者從其他什麼地方獲取到的；因為頁面的資料是動態讀取、拼接展示的，所以應用不需要佔用太大的空間，當資料發生變化時，頁面幾乎不需要修改，就可以實時生效，維護起來更為方便；

但是動態頁面由於需要讀資料庫或快取，花費的時間勢必會更長，更為關鍵的是，如果併發量很大，資料庫的讀取速度會成為瓶頸；還有上面說到的，動態頁面難以被搜尋引擎收錄，不利於 SEO；另外就是容易受到攻擊。

網頁靜態化，就是將動態網頁變成靜態網頁的過程。這個方案，會有一個靜態化服務，將動態的資料生成靜態化的頁面；這個過程，可能會生成大量的 html 頁面。

如圖：

什麼是偽靜態？

比如我們要訪問一個商品頁面：http://www.xxx.com/product?id=1

id = 1 表示展示的是商品編號為 1 的商品，但是由於這種 url 不利於搜尋引擎的抓取，所以通常會改造成 http://www.xxx.com/product/1.html ，這樣就讓搜尋引擎認為是個靜態頁面，偽靜態頁面會對 url 進行 rewrite。

靜態化是真真正正生成一個個 html 頁面的，而偽靜態化只是偽裝了 url，實際還是需要做動態處理。

偽靜態化不需要生成 html 頁面，頁次更節約伺服器空間；偽靜態化雖然需要做動態處理，但是可以將變化的資料放到快取伺服器中，不需要從資料庫讀取資料；當然，和純靜態化相比，偽靜態化的速度還是慢一些的。

什麼是靜態頁面？

通常我們所說的靜態頁面是以 htm、html、shtml、xml 這些字尾結尾的頁面，通常使用前端相關的語言比如 HTML、CSS、JavaScript 就能完成靜態頁面的編寫工作，基本上不需要與資料庫和後臺語言（JAVA,PHP,PYTHON等）。頁面一旦完成建立，內容就固定不變，不管任何時候訪問，其內容是一層不變的（除非遭受攻擊）。如果你需要修改靜態頁面的內容，你需要手工修改靜態頁面的內容，將頁面重新上傳到伺服器上才能看到內容的變化。

與靜態頁面相對的就是動態頁面，那什麼是動態頁面？說通俗直白點就是頁面分為檢視模板和資料，資料大多數是通過後端語言請求資料庫獲取，然後替換檢視模板中的標籤而已。動態頁面的字尾一般和採用的後端技術相關，比如 php、aspx、jsp、cgi 等。動態頁面使用的技術比較複雜，還要考慮併發和資料壓力等等，訪問的人說越多，對伺服器的壓力就越大。

一、先說說動態頁面的優點：

1、從工作量方面動態頁面大大優於靜態頁面

比如一個新聞站點有很多新聞內容，如果使用動態頁面技術，建幾個動態頁面即可，資料從資料庫獲取，透過向動態頁面傳參就可以看到豐富的內容。如果你用手工的方式去建立的話，在這個資訊爆照的時代，非把人累死不可。

2、動態頁面的內容更新更方便、更快捷

如果你要更新網站的內容，如果系統提供後臺管理的方式，只需要在後臺完成表單的提交即可，無需上傳伺服器檔案就能完成網站內容的更新。前端頁面哪怕是改個標點符號，你都需要手動更改再進行伺服器的上傳覆蓋工作。

3、動態頁面更節省硬碟空間

相對靜態頁面來說，動態頁面數量會少許多，因此更節省伺服器的硬碟空間，不像靜態頁面在站點目錄下放一堆檔案。

二、靜態頁面的優點：

1、訪問速度更快

由於靜態頁面無需請求後端資料資源，佔用的伺服器資源相對於動態頁面會少許多，因此訪問速度更快。如果使用者過多訪問的話，如果使用動態頁面 ，架構設計不好的話，還有可能發生拖死伺服器和資料庫的情況，靜態頁面發生的機率則很低。

其次，CDN技術對靜態頁面支援很好，因此無論何時，訪問靜態頁面都很快，幾乎佔用不到伺服器資源，即使伺服器掛掉，靜態頁面還能正常訪問。

2、針對搜尋引擎更加友好

現在大家都習慣基於搜尋引擎的搜尋訪問網站，如果網站收錄太差，搜尋引擎找不到的話，那我們建網站的意義何在呢？搜尋引擎主要用爬蟲技術抓取我們網站的內容，你可以這樣理解，爬蟲也有惰性，如果你的網站訪問比較慢，爬蟲會在漫長的等待狀態，這是對搜尋引擎資源巨大的浪費，因此爬蟲不能在你的網站耽誤太長時間，自然就會放棄收錄。剛才提及到靜態頁面的訪問速度明顯優於動態頁面，因此靜態頁面更符合爬蟲的口味，收錄會更多。

3、部署更簡單、更省錢

在雲時代，我們已經無需過多操心伺服器的事情，如果你採用動態技術的話，還是需要考慮伺服器、資料庫、安全等設定問題，但是靜態網頁則不存在這個問題，你甚至可以不需要伺服器，利用雲平臺的靜態儲存服務，完成檔案上傳即可，剩下的工作交給雲平臺，它會幫你部署cdn、備份等服務，這些服務加在一起也不過幾百塊一年而已（中小型網站）。

由於現在網站互動越來越複雜，對效能要求越來越高，為了平衡動態網頁和靜態頁面，就出現了動靜分離的技術，因此有了前端工程師和後端工程師之分，前端負責頁面的互動和資料內容的渲染（透過ajax技術拿到後端的資料），後臺工程師則負責業務邏輯和資料的處理。目前這是一個主流的開發方式，大大提高了開發效率和頁面的效能，但是還存在一個問題，由於資料是透過 JavaScript 的 AJAX 技術渲染的，搜多引擎就很難理解指令碼的內容，增加了爬蟲工作的複雜程度，因此對搜尋也十分不友好，那怎麼解決，這裡可以用到我下面提及的 SSR （服務端渲染技術）。

基於動靜分離的基礎，我們可以採用SSR服務端渲染技術來解決搜尋引擎收錄和效能問題，那什麼是SSR服務端渲染技術呢？說通俗點就是後端把資料傳遞給前端，前端利用相關技術，先自己把JS先執行一遍，將輸出的資料內容直接寫到頁面的DOM裡，可以說就是純粹的靜態頁面，這樣爬蟲就不需要處理JS指令碼的問題，因此很利於搜尋引擎收錄。

最後簡單提及下，如果你在使用 React 前端框架的話，你可以透過 Next.js 實現SSR服務端渲染技術，如果使用 Vue 前端框架的話，你可以使用 Nuxt.js 實現SSR服務端渲染技術。

今天的內容就和大家分享到這裡，透過這篇文章我們一起學習了什麼是靜態頁面，什麼是動態頁面，以及兩者的區別和特點，最後我們探討了如何綜合兩者，實現最優的方案。感謝你的閱讀，如果你喜歡我的分享，麻煩給個關注、點贊加轉發哦，你的支援，就是我分享的動力。

最大的好處在於使用者體驗效果提高了，第一次訪問時生成靜態網頁，也就是把整個顯示的網頁以程式碼的形式儲存在使用者端，當用戶第二次訪問時會載入使用者端靜態網頁，只有引數改變時需要載入的模組在從伺服器調資料，顯示完成後再生成一個新的靜態網頁，當用戶返回上一頁操作基本沒有載入時間。所以最大的作用就是提高網頁顯示速度，減少載入時間而已。