網頁開發

從 Zeabur 環境變數事件理解 .env、部署平台與 Secrets Management 的差異，以及權限、稽核、rotation 和撤銷機制。

整理 4 年多來網頁前後端與 React Native 開發所用的工具與架構：Monorepo、環境變數、資料庫、佇列與前端套件，以及讓 AI 寫出可維護程式碼的規範。

Client Component 無法直接匯入 Server Component。把搜尋等即時狀態寫進 URL search params，讓頁面透過 searchParams 取值再傳給 RSC，並可搭配 nuqs 管理。

比較 JWT（Bearer Token）與 Session Cookie 兩種登入認證：access/refresh token 流程、搭配 Redis 的 Session、即時登出與撤銷，以及 XSS、CSRF 風險與選型建議。

Next.js 專案總是出現 react-hydration-error？解析 Hydration 原理與 SSR、CSR 流程，並提供三種避免 Hydration Error 的實用解法。

React Server Component（RSC）在伺服器渲染元件並串流到瀏覽器、減少 bundle 大小。本文說明 RSC 在 Next.js 中的運作，以及它和 SSR 的關係。

為什麼 AI 聊天應用多選 SSE 而不是 WebSocket？比較兩者在雙向溝通、瀏覽器支援與部署上的差異，並用 Hono、Zustand 與 Vercel AI SDK 實作串流聊天。

開發時遇到「CORS 被封鎖」？解析跨來源資源共用（CORS）是什麼、為什麼會出錯，以及如何用後端設定或前端 Proxy 解決，附 Hono、Vite、Next.js 範例。

後端 log 裡突然出現大量異常請求，才發現網站正遭受攻擊。本文分享如何用 Cloudflare WAF 建立防護規則，阻擋惡意流量。

我花了將近一年重構陪伴我三年的個人網站。從 2021 年用 Next.js 與 TypeScript 練手開始，這篇整理這次重構選用的技術棧與原因。