Build Your Own Static Site Generator

2020-04-17#front-end
文章目錄

最近玩了 11ty,轉眼間就嘗試了 Hexo, Gatsby, Docusaurus 不少 SSG 的工具,於是就想來嘗試透過做一個 SSG 來了解 SSG 的底層原理。

SSG 是什麼?

在討論 SSG 是什麼之前,要先提到何謂網頁 Render,這邊指得不是 Layout Paiting 等等的 Browser Render,而是網頁被填入資料回傳給 Client 端看到的最終 HTML 版本的 Render。

過去如果要做一個網站,一開始可能是利用 php 在後端往 template 裡面放入資料產生出 html 夾帶 css, js, 圖片等等內容後,回傳到我們的瀏覽器上,這是最原始的 Server Side Render。

但有一天,大家發現看網站的時候如果每次一個動作、就要刷新一次頁面不停打斷的體驗很不好,想要在不刷新頁面的情況下進行操作。於是讓 Client 端一開始只有一個最小 html,其他內容都透過 AJAX 的方式,來即時更新在頁面上,並誕生出 Vue, React 等前端框架來輔助開發,讓使用者體驗更加清新脫俗,產生 SPA 的網路應用,這是 Client Side Render。

可是事情不是那麼簡單,體驗好是好了,但是網站在 Google SEO 的表現上卻差勁無比,原因是因為,網站在抓資料更新回頁面之前 html 是空的,這讓 Google 爬蟲無力,就沒辦法讓你的網站出現在搜尋結果前面。所以大家希望可以混合 Server Side Render 與 Client Side Render,讓前端拿到的是關於 SEO 部分後端先渲染好的內容,但又保留動態網站的應用,這是 Isomorphic Server Side Rendering。

不過這實在太麻煩了,因為要解決動態靜態內容合成、 webpack 打包設定、在 server 端 render 打包跟 local 端一些 dependency 衝突等等問題,而且前端也要懂後端的一些操作,不如就讓後端直接把資料填入的內容都全部先 Render 起來放,讓前端呼叫特定的頁面好了,這就是 JAMStack 的概念。

SSG vs JAMStack

等等,所以 SSG 等於 JAMStack 嗎1 ?

這邊參考 JAMStack 的定義,與其說 SSG 就是 JAMStack 不如說 SSG 符合 JAMStack 的精神

Markup

參考自 JAMStack 定義推廣網站,SSG 其實是驅動 JAMStack 的重要推手之一,要怎麼產生出靜態網站,當然可以透過手刻 HTML,但如果需要靜態網站可以從靜態資料自動產生出來, SSG 也就自然而然的成為 JAMStack 網站的常見的需求之一。

而常見有支援 SSG 的 Framework 有 Gatsby.js, Next.js, Hexo.js 等等服務。

SSG 基本功能

基於以上,我們可以初步的定義出 SSG 應該有的基本功能,由於這邊旨在學習 SSG 的原理,所以就只做最基本的功能,以下技術棧會採用 Node.js 來實作,會涉及的議題包含:

  • 樣板引擎原理:根據模板建立 HTML
  • 靜態資料處理:從靜態資料檔案讀取資料來創建網站

HTML Template Engine

樣板引擎是用來產生 HTML(或文字檔案)的程式,可以透過定義模板並傳入變數、迴圈的方式來填入內容,動態產生出一個個 HTML 檔案。有了樣板引擎我們就不需要一個個頁面自己手動調整,將關注點分離。所以大部分的前端框架都會實作自己的樣板引擎。

而一個樣板引擎會有什麼功能呢?這邊參考 node.js 的知名樣板引擎 ejs,來看看樣板引擎最少會有什麼功能2

這需要兩個階段來處理:

  1. 讀取文字檔:將 HTML 跟特殊符號處轉為 AST,關於 AST 可以參考 AST Workshop 的學習筆記
  2. 在特定符號的部分帶入 JavaScript 產生的結果。

所以我們現在嘗試用 node.js 來實作讀取一個格式類似 HTML 純文字檔,其中如果遇到特定符號 <%= ... => 之間的時候,這邊需要動態跑出對應的資料。

其它文章


© 2020 minw Powered by Gatsby