作品 / 2026
本站
一個本身就是證明的作品集:靜態外殼先到,即時資料從空洞串流進來,每個快取決策都寫下來。
- 角色
- 設計、工程
- 技術
- Next.js 16.4, React 19.3, Cache Components, Tailwind 4
問題
大部分作品集是一整排 logo 和截圖。它們說明用了什麼,卻沒說做了什麼決定,而且常常撐不過下一次改版。
我想要一個架構本身就是論點的網站:每個路由示範一種渲染或快取技巧,而頁面會告訴你是哪一種。
做法
全站開啟 Cache Components 與 Partial Prerendering。首頁的名字在靜態外殼裡;「近況」那一行是 Suspense 空洞,在請求時從分鐘級快取串流進來。
作品頁依語言與 slug 預先渲染,並以 slug 標記,所以修改一件作品只會讓那一頁和作品列表失效,其他都不受影響。
聯絡表單是透過 useActionState 接上的 Server Action,關閉 JavaScript 也能送出並顯示錯誤。
結果
每個路由在兩種語言下都有靜態外殼。首頁唯一在請求時才做的工作,就是「近況」那一行。
版權頁列出版本與刻意省略的東西,讓技術頁可以連到證明,而不是空口說白話。