軟體架構

淺談 Jamstack 架構

前言 前陣子寫 Next.js 筆記時和朋友們討論 Gatsby.js「The static dynamic site generator for dynamic web developers」部分時提到了 Jamstack,其中一位夥伴說了: 那 Jamstack 跟我們寫框架的 SPA 網站不是一樣嗎? 提問者後續在其他人的解釋下才理解差異。之後想想,我在Next.js 筆記中 Jamstack 也只是草草帶過,確實有必要整理一下我的認知,大家教學相長,若此篇有什麼錯誤也歡迎指證。 什麼是 stack 架構? 有時我們會聽到 ${Something}stack 之類的名詞,開頭的字母即為技術的縮寫組合,例如: * LAMPstack: 一般稱 LAMP,包含由 L(Linux)、A(
SimonAllen

Next.js 入門:由 CRA 至 Gatsby 與 Next.js

此文不會講解為什麼 SSR 對 SEO 和 LCP 有幫助的原因 如果不懂 LCP 是什麼,可見 Google 關於 LCP 指標的說明 如果連 SPA 和 SSR 是什麼都不太懂,可以參考 Huli 大大寫的跟著小明一起搞懂技術名詞:MVC、SPA 與 SSR 前言 前陣子的 React 生態圈可謂是振奮人心,官方在今年 6 月初公布了 18 版的計畫,其中基於 Suspense 的 Server Side Rendering 架構另許多開發者眼睛一亮,畢竟從 Client Side Rendering (以下簡稱 CSR)跨到
SimonAllen

什麼是 Serverless 架構?

前陣子又聽到了 Serverless(無伺服器)架構這個酷東西,我第一次聽到 Serverless 應該是某年 Modern Web Conference 對岸講者的分享,想想還是簡單記錄一下。 Serverless 乍聽之下好像是「沒有伺服器」,但實際上伺服器並沒有消失,而是由雲端服務供應商(如 AWS、Google Cloud、Azure)負責管理。 我們只是不再需要手動設定、部署、監控這些伺服器,這些繁瑣的基礎建設交給他們來搞定,我們開發者就可以專注在寫程式碼上,開心寫邏輯,寫完就交給雲端去跑。 Serverless 是怎麼來的? Serverless 架構的核心思想,是讓開發者不必管理伺服器,透過「功能即服務(Function as a Service,FaaS)」或「後端即服務(Backend as a Service,BaaS)」的形式來實作。
SimonAllen

SPA 部署後部分頁面載入失敗?覆蓋式部署的對應解法

這是近期工作上遇到的問題,記錄一下原因與解法,解法不一定是最佳解。 問題背景 接手了公司的一個網站,發現使用者一直在此單頁應用 SPA 中遇到偶發、但令人頭痛的問題。通常會在網站「部署新版本」後、且「使用者尚未重新整理頁面」的情境下發生。 情境如下: 1. 使用者正在我們的後台網站上瀏覽(例如還停留在 /home)。 2. 這時我們開發者部署了一個新版本,且採用了「覆蓋式部署」(也就是直接覆蓋掉原本的靜態資源)。 3. 使用者繼續使用網站並透過前端路由導覽到尚未載入過的頁面(例如 /profile),這個頁面會觸發懶加載動作(例如 Profile.chunk.js)。 4. 由於使用者當前的 HTML 是舊版本,因此所引用的 chunk 路徑還是舊版本的,如 static/js/Profile.abcd1234.chunk.js。 5. 但這個資源已經在部署新版本時被移除或覆蓋,
SimonAllen