文章

轉眼間來到了 2026 年了，自己再過去開發到工作所開發的時間也來到了 4 年多，過去主要專注在網頁前後端開發，近期因為工作需求又以移動端 (React Native) 開發居多，中間也對於這些開發工具及架構有了不少轉換，再加上近期靠 AI 寫 code 的次數也越來越頻繁，並對他的架構有一定的需求跟規範，目的是讓自己人看得懂餅也有辦法做維護，所以打算整理一篇關於過去到現在所使用到的開發工具及架構的整理。

這篇文章從實務角度深入介紹 TypeScript 開發體驗背後的關鍵元件，包括 tsserver 與 Language Server Protocol（LSP），說明編輯器如何取得自動完成、跳轉定義與錯誤診斷等智慧提示。內容由淺入深，帶你理解專案類型（Configured / Inferred Project）、typescript-language-server 的角色，以及為什麼「穩定的邊界型別」與型別推論（infer）對大型專案維護與提升開發效率至關重要，並提供實用範例與最佳實務建議。

在 Next.js App Router 中，Client Component 不能直接匯入 Server Component；當你想把像「搜尋輸入」這種即時變動的客戶端狀態傳回 RSC 時，最實用的做法之一是把狀態寫進 URL 的 search params，並讓 page 透過 searchParams 取得值後再把它傳給 RSC。Next.js 也建議在 Server Component Page 使用 searchParams prop、在 Client 端用 useSearchParams／useRouter 更新查詢字串來觸發頁面拿到最新參數；若你想要更好用的 query string 狀態管理體驗，也可以搭配 nuqs。

JWT（Bearer Token）與 Session Cookie 是最常見的登入認證方案。本文從前端 SPA 與後端實作角度，拆解 JWT 的 access_token／refresh_token 更新流程，以及 Session Cookie 搭配後端 Session store（如 Redis）的運作方式，並比較擴充性、即時登出與撤銷能力、安全風險（XSS、CSRF）與實務選型建議，協助你在面試或專案設計時做出更合理的決策。

想搞懂為什麼你的 Next.js 專案總是出現 react-hydration-error 嗎？這篇文章深入解析 Hydration 的原理，帶你了解 Next.js 的 SSR 與 CSR 流程，並提供三種避免 Hydration Error 的實用解法，讓你的 React 頁面更穩定、無錯誤

React Server Component（RSC）是 React 新一代核心能力，透過在伺服器端渲染元件、串流傳輸與減少 bundle size，大幅提升 Next.js 應用效能與使用者體驗，並強化資料安全與開發流程。

這篇文章從實務開發者觀點，深入解析為何現代 LLM／AI 聊天應用多半選擇 SSE（Server‑Sent Events）而不是 WebSocket，帶你比較兩種協議在雙向溝通、瀏覽器支援、部署與擴充性上的差異，同時示範如何用 Hono、Zustand 與 Vercel AI SDK 打造可串流的 AI 聊天功能。文中包含前後端完整程式碼範例與實作細節，適合正在開發 AI 聊天產品、考慮串流回應架構，或想釐清 SSE 與 WebSocket 適用場景的前端與全端工程師。

學習如何使用 pgvector 在 PostgreSQL 實現向量搜索。本文涵蓋 Embedding 原理、餘弦相似度與歐幾里德距離、IVFFlat 與 HNSW 索引比較、向量資料庫選型建議，並提供完整的 Bun/TypeScript 實作範例，適合開發者快速上手 AI 驅動的語義搜索。

你是否常在開發時遇到「CORS 被封鎖」的錯誤？本文深入解析跨來源資源共享（CORS）是什麼、為什麼會出錯，並教你如何透過後端設定與前端 Proxy 有效解決，完整附上 Hono、Vite、Next.js 實作範例。

自己過去比較少在看 runtime log，除非有接到 error 的通知才會稍微看一下。直到後來我在後端 service 的 log，突然注意到大量異常的請求進來，才意識到網站可能正遭受攻擊。本文將分享我如何透過 Cloudflare WAF 建立完整的防護機制，有效阻擋惡意流量。