Thursday, April 8, 2021

從 backend 傳送「初始化資料」到 frontend

開發 fullstack application 時,從 backend 要送資料到 frontend ,這是很常見的事,而這件事有三種不同的作法:

  1. API
  2. HTML 頁面初始化
  3. 編譯期初始化


通常就是讓 backend 提供 API ,然後 frontend 去送出 http request 來取得資料。然而,有一種情況:「 frontend App 要初始化的時候,就需要從 backend 取得幾個變數來做初始化,由於只有不到十個變數、資料量不大、資料也不會變化,似乎為此特別做一個 API 也太麻煩了。」

於是,對於上述的問題就可以考慮直接透過 html document 來夾帶資料的作法:

a. 當 backend 在生成 page content 時,在 hiccup format 的 html 裡加入下方這一行。注意:MIME type 要設定為 application/json,如此一來,瀏覽器就不會去執行它。

[:script#data-tag {:type "application/json"}
   (json/write-str {:key-a data-a :key-b data-b})]

b. 在 frontend 的 ClojureScript 裡,可以透過如下的程式碼來取得資料:

(defn init-config []
   (let [data (->> (js/document.getElementById "data-tag")
                        (.-innerHTML)
                        (.parse js/JSON))]
     (js->clj data :keywordize-keys true)))


還有一種情況是:「如果需要初始化的資料,根本一開始就只是放在一個靜態的檔案裡」這種情況,就可以考慮最後一種作法,讓 ClojureScript 利用 macro 在編繹期去讀取檔案。