95後程序猿小A
什麼是靜態頁面？
通常我們所說的靜態頁面是以 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服務端渲染技術。
小節
今天的內容就和大家分享到這裡，通過這篇文章我們一起學習了什麼是靜態頁面，什麼是動態頁面，以及兩者的區別和特點，最後我們探討了如何綜合兩者，實現最優的方案。感謝你的閱讀，如果你喜歡我的分享，麻煩給個關注、點贊加轉發哦，你的支持，就是我分享的動力。
前端達人
網頁靜態化，是為了加速網頁的訪問，提高網站的負載，利於搜索引擎抓取。
靜態頁面
靜態頁面是指頁面上的內容是死的，不會變的；如果網站的頁面是純 html 頁面的話，當用戶訪問頁面不需要經過數據的讀取和處理，就能得到文件，所以訪問速度會非常的快，相同的服務器資源，靜態頁面可以支持更高的訪問量；純靜態的網頁對搜索引擎友好，容易被搜索引擎收錄，動態網頁中的 [?] 讓搜索引擎很難辦，因為它可能從數據庫中把所有的數據都抓取出來，所以搜索引擎通常不抓取 url 中 [?] 以後的內容；因為是靜態頁面，所以也不會存在 SQL 注入之類的問題；
靜態頁面都是一個一個的 html 文件，如果網站內容更新的頻率比較高的話，就會生成或更新大量的文件，如果靜態頁面的模板需要變化的時候，這個更新量就更恐怖了；另外靜態頁面的交互性比較差。
動態頁面
動態頁面是指頁面上的內容是活的，可能是從數據庫中讀取出來的，或者從其他什麼地方獲取到的；因為頁面的數據是動態讀取、拼接展示的，所以應用不需要佔用太大的空間，當數據發生變化時，頁面幾乎不需要修改，就可以實時生效，維護起來更為方便；
但是動態頁面由於需要讀數據庫或緩存，花費的時間勢必會更長，更為關鍵的是，如果併發量很大，數據庫的讀取速度會成為瓶頸；還有上面說到的，動態頁面難以被搜索引擎收錄，不利於 SEO；另外就是容易受到攻擊。
網頁靜態HTML化
網頁靜態化，就是將動態網頁變成靜態網頁的過程。這個方案，會有一個靜態化服務，將動態的數據生成靜態化的頁面；這個過程，可能會生成大量的 html 頁面。
如圖：
偽靜態化
什麼是偽靜態？
比如我們要訪問一個商品頁面：http://www.xxx.com/product?id=1
id = 1 表示展示的是商品編號為 1 的商品，但是由於這種 url 不利於搜索引擎的抓取，所以通常會改造成 http://www.xxx.com/product/1.html ，這樣就讓搜索引擎認為是個靜態頁面，偽靜態頁面會對 url 進行 rewrite。
靜態化是真真正正生成一個個 html 頁面的，而偽靜態化只是偽裝了 url，實際還是需要做動態處理。
偽靜態化不需要生成 html 頁面，頁次更節約服務器空間；偽靜態化雖然需要做動態處理，但是可以將變化的數據放到緩存服務器中，不需要從數據庫讀取數據；當然，和純靜態化相比，偽靜態化的速度還是慢一些的。
我將持續分享Java開發、架構設計、程序員職業發展等方面的見解，希望能得到你的關注。
會點代碼的大叔
最大的好處在於用戶體驗效果提高了，第一次訪問時生成靜態網頁，也就是把整個顯示的網頁以代碼的形式保存在用戶端，當用戶第二次訪問時會加載用戶端靜態網頁，只有參數改變時需要加載的模塊在從服務器調數據，顯示完成後再生成一個新的靜態網頁，當用戶返回上一頁操作基本沒有加載時間。所以最大的作用就是提高網頁顯示速度，減少加載時間而已。
管慶林2
1.有利於seo
2.相較於spa頁面，打開速度很快
