在我當初學網頁的時候，老師都會說網頁就是由靜態的 HTML（HyperText Markup Language，超文本標記語言） 組成，這句話放到現在好像對又不完全對？

網頁的渲染方式

通常我們說 網頁的『渲染』 ，通常是指將資訊轉換為標準格式並可供閱讀器顯示的內容。而 HTML 就是給瀏覽器看得格式，這構成了我們最基礎的網頁。

事情沒這麼簡單

現在的網頁通常包含三大要素，包含 HTML、CSS、Javascript 每個都有其用意，HTML負責內容本身、CSS負責樣式（外觀）、Javascript可以做一些簡易的邏輯判斷。原本這一切分工都是這麼的美好，但...某天有人想到 『如果，我的內容可以由外部載入，那是不是網頁本體就不需要重新下載（？）』

於是 單頁式應用程式（SPA） 就誕生了， 一個由Javascript驅動的前端應用程式 去串聯後端的資料模型。

所以發生了甚麼事？

網頁不再是單向街

在單頁式應用程式（SPA）下，當我們點開網頁與內容進行互動，將不再需要下載新的頁面而是更新現有模型中的資料。

想像一下，當你在一個購物網站上選擇了一個商品，而無需重新載入就顯示了商品資訊。這就是 SPA 的運作方式。所有的資料都是動態載入，對使用者來說感受到的互動延遲變得非常少，一切都很流暢。

新的問題出現了

首先是 SEO（搜尋引擎最佳化） 的問題。由於內容是動態載入，搜尋引擎爬蟲在抓取這些網站時可能無法辨別完整內容。此外，在某些龐大的 SPA應用程式 因為需要載入大量的Javascript資料，對初次載入的效能要求較高。

有趣的解決方法 Hybrid Rendering

混合渲染（Hybrid Rendering） 是其中一個解決方法，如果是因為資料全動態而無法使搜尋引擎抓到資料，那麼就改成當我初次載入就載入完整的頁面（SSR），往後的資料更新再使用（SPA）的方法更新。這看似解決了問題，但似乎使架構變得更加複雜了。

現代化框架的加入（？）

好，既然所有內容都可以用Javascript動態產生，那麼...是不是代表我們可以創造自己的網頁編寫方式？
於是就造就了React、Vue 和 Angular...這些神奇框架的存在。最一開始只是為了簡化複雜的前端開發，並提升可維護性，但到最後會發現這些框架可能會違背當初網頁的初衷。

簡單來說，就是前端的渲染、內容、操作/互動、換頁，都是完全由Javascript產生出來的，等於變向在網頁閱讀器中加入微後端的功能。這是非常消耗資源的...於是，就有人做了預渲染..。

神奇的預渲染

預渲染這個東西真的很有趣，因為前面有說到那些框架是為了簡化複雜的前端開發，而過度的資源消耗和糟糕的SEO不是我們的目的，因此有人就想到了如果我在資源發表出去之前就先產生好呢？於是就有許多工具使用Headless Chrome去開啟前端框架渲染出來的頁面，再將載入完成後的資料儲存為靜態HTML。

恩...怎麼有點多此一舉的感覺，反正是解決問題了。