✏️全部文章
什麼是 Middleware？Next.js 實戰 Middleware 教學
前端框架-你有沒有想過，為什麼有時候我們打開一些國外網站能自動顯示中文版網頁？而不是英文？ 背後靠的其實是一個分流機制：Middleware 如果你不清楚他是什麼、怎麼運作，今天這篇文章 5 分鐘帶你搞懂！...
前往什麼是 Middleware？Next.js 實戰 Middleware 教學文章甚麼是樂觀更新 Optimistic Updates？增強用戶體驗的技術
前端進階-甚麼是樂觀更新 Optimistic Updates？ 在前端開發中，樂觀更新（Optimistic Updates）是一種用來提升互動流暢度與使用者體驗的技術手法。 簡單來說，它的核心思想是：「...
前往甚麼是樂觀更新 Optimistic Updates？增強用戶體驗的技術文章JS Symbol 是什麼？5 分鐘詳解與實戰應用
前端進階-Symbol 是 ES6 引入的 JS 原始型別，他專門用來建立唯一且不可重複的識別符號（unique identifier）。 Symbol 很適合用在需要不重複鍵名與封裝屬性的場景。這篇文章...
前往JS Symbol 是什麼？5 分鐘詳解與實戰應用文章Query Parameters 介紹與實作 - 網址後面一長串參數是什麼？
前端進階-前言 不知道你有沒有注意過，有時候網址後面會帶一大串參數，比如下面 Uniqlo 的網址： 他並不是什麼有毒的連結，而是網頁很常使用的技巧，叫做 Query Parameters（Query Pa...
前往Query Parameters 介紹與實作 - 網址後面一長串參數是什麼？文章前端網頁實現自動儲存的 7 種方式
前端進階-自動儲存是前端一個很細節功能，但對使用者的體驗影響很大。特別是在處理複雜表單系統或文檔編輯頁面時，自動儲存能大幅降低資料遺失的風險，也讓操作更加順暢。 在這篇文章中，我將帶你深入了解 7 種自動儲存...
前往前端網頁實現自動儲存的 7 種方式文章React Server Action 的全面講解
前端框架-React 和 Next.js 這幾年更新得非常快，特別是 Next.js 13/14 推出的 App Router，帶來了許多全新的觀念。 其中一個讓我剛開始完全搞不懂的功能，就是 Server ...
前往React Server Action 的全面講解文章SSG & CSR & SSR - 現代 Web 的渲染方式
前端進階-前言 在前端世界中，「渲染策略」一直是核心課題之一。 從最早的靜態網站，到後來需要即時性與互動性的應用，我們不斷嘗試不同的方式來兼顧速度、體驗與維護性。 特別是現在網路的使用場景越來越多元了，單...
前往SSG & CSR & SSR - 現代 Web 的渲染方式文章認識 PostgreSQL 與 Supabase - 基本觀念與使用教學
前端進階-什麼是 PostgreSQL？ PostgreSQL 是一個免費、開源的資料庫系統，也是現在最熱門的資料庫。 PostgreSQL 強大的地方在於，除了足夠穩定、內建各種豐富的資料類型像是 JSO...
前往認識 PostgreSQL 與 Supabase - 基本觀念與使用教學文章useMemo 教學 - React 的記憶化函數
前端框架-React 提供了許多強大的 Hooks，其中 useMemo 屬於是最容易被使用錯誤的 Hook，這次教學就由淺入深介紹 useMemo 的概念、用法與最佳實踐 什麼是 useMemo？ use...
前往useMemo 教學 - React 的記憶化函數文章useRef 教學 - React 存取 DOM 與保持資料一致的 Hook
前端框架-什麼是 useRef useRef 是 React 提供的一個 Hook，它可以用來保存一個值，而這個值會被存在一個物件裡面，這個物件再更新組件時，會保持一致的資料，不會被清空。 因為會被保存在物...
前往useRef 教學 - React 存取 DOM 與保持資料一致的 Hook文章