什么是網頁靜態化？

感謝邀約，現在大多數主流網站尤其是新聞博客以內容為主的站點，都會采用網頁靜態化的技術，首先說明網頁靜態化技術并不是什么新技術，十幾年前就已經在使用，以下是我針對這個問題的解答，歡迎大家在留言區進行探討。

什么是靜態頁面？

通常我們所說的靜態頁面是以 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服務端渲染技術來解決搜索引擎收錄和性能問題，那什么是SSR服務端渲染技術呢？說通俗點就是后端把數據傳遞給前端，前端利用相關技術，先自己把JS先運行一遍，將輸出的數據內容直接寫到頁面的DOM里，可以說就是純粹的靜態頁面，這樣爬蟲就不需要處理JS腳本的問題，因此很利于搜索引擎收錄。

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

小節

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