· React / Tanstack Query
原型能跑，不代表數字是對的：把 vibe coding 原型重構成 React 的紀錄
把一份約 9800 行的 HTML/JS 原型移植成 React + TanStack Query + Zustand，過程中最大的收穫不是架構，而是找出原型裡那些「不會報錯、只會悄悄算錯」的地方。
I'm Jacky,
and these are my frontend notes.
Breaking complex frontend problems into code we can maintain.
Problems from building with React, Next.js, and TypeScript, along with the trade-offs and fixes I found along the way.
Read all postsRecent posts
Implementation problems, solutions, and the choices behind them.
- · Software Engineering / Engineering Ownership
AI Agent 可以幫你寫 Code，但它不會替你承擔 Ownership
AI Agent 降低了實作門檻，但工程判斷與產品責任不會消失。Code 可以由 AI 產生，最後決定 Commit、Review 與 Merge 的仍然是工程師。
- · Cache / App Router
Next.js + TanStack Query 的 Cache 到底在快取什麼？一次搞懂三層快取
深入解析 Next.js 16 與 TanStack Query v5 的三層快取機制，搞懂 Query Cache、use cache 與 App Router Client Cache 的差異、生命週期與適用情境。
- · Tanstack Query / Zustand
當 Zustand 開始長得像半套 TanStack Query：一次 Legacy Server State 重構
當既有 Zustand store 開始同時負責 API cache、request dedupe、expiration、error handling 與 rendering state，同步問題也跟著出現。這篇記錄一次真實的 Legacy 重構：從找出 Server State 的責任邊界，到遷移至 TanStack Query，並改善資料一致性、錯誤恢復與 query identity。
How I approach the work
Give each component a clear job
When UI, data fetching, and effects start getting tangled, I sort out their responsibilities before deciding where to split the component.
Know where state belongs
I separate server data from UI state. TanStack Query handles fetching and caching; Zustand handles UI state that needs to be shared.
Automate the repeatable checks
Types, lint, and tests run in CI so they can be repeated with every change. That leaves review time for design and trade-offs.
Problems I have worked through
A few topics from implementation work that I keep writing about.
- State refactoring — Separating fetching, caching, and UI state in existing projects to make data flow easier to trace.
- Tests and CI — Using Vitest, Playwright, and CI to cover workflows that manual checks tend to miss.
- Content websites — Working through metadata, sitemaps, images, and cache updates while balancing SEO and loading speed.
- Permission boundaries — Keeping sensitive logic on the server with CSP, Route Handler authorization, and a data access layer.
