Communitygithub.com

YepAPI/skills

Redis 快取、CDN 快取標頭、stale-while-revalidate、快取失效、React Query。

skills 是什麼?

此技能提供一套全面的多層快取策略,協助開發者有效提升應用程式效能。它涵蓋從瀏覽器端 Cache-Control 標頭、CDN 邊緣快取,到應用層的 Redis 和資料庫查詢快取。技能詳細說明 stale-while-revalidate 模式,能讓內容在背景刷新時快速提供可能略為過時的資料,從而優化使用者體驗。此外,還有豐富的 React Query / TanStack Query 配置指南,包括 staleTime 和 gcTime 的設定,以及基於標籤的快取失效模式,確保資料在寫入後立即更新。支援 Next.js 的 ISR 和 fetch 快取,並提供多種語言(TypeScript、Python、Rust)的實作範例。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/YepAPI/skills/tree/HEAD/skills/caching-strategy

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

快取策略

規則

  • 在每一層進行快取:瀏覽器(Cache-Control)、CDN(邊緣)、應用程式(Redis)、資料庫(查詢快取)
  • 對可接受略為過時的內容使用 stale-while-revalidate —— 快速提供,在背景重新整理
  • Cache-Control 標頭:對於有雜湊的靜態資源使用 public, max-age=31536000, immutable;對於動態頁面使用 public, s-maxage=60, stale-while-revalidate=300
  • Redis 快取:序列化為 JSON,為每個鍵設定 TTL,使用命名空間鍵(cache:users:123)
  • React Query / TanStack Query:設定 staleTime(資料保持新鮮的時間長度)和 gcTime(保留在記憶體中的時間長度)
  • 寫入時失效 —— 當資料變更時,立即刪除或更新快取項目
  • 使用快取旁路模式:先檢查快取,未命中時從來源擷取,再寫入快取
  • 對於 Next.js:利用 ISR(revalidate)、unstable_cache 以及伺服器元件的 fetch 快取
  • 基於標籤的失效:按實體類型標記快取項目,在變更時使該標籤的所有項目失效

模式

// 快取旁路模式搭配 Redis
async function getCachedUser(id: string) {
  const cached = await redis.get(`user:${id}`);
  if (cached) return JSON.parse(cached);
  const user = await db.user.findUnique({ where: { id } });
  await redis.set(`user:${id}`, JSON.stringify(user), "EX", 3600);
  return user;
}

避免

  • 沒有設定 TTL 的快取 —— 過時資料將無限期存在
  • 在共用 CDN 快取中快取使用者特定資料 —— 使用 private 或 Vary 標頭
  • 快取雪崩:使用鎖定或 stale-while-revalidate 來防止驚群效應(thundering herd)
  • 快取錯誤回應 —— 僅快取成功的結果

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

YepAPI/skills

WCAG 2.1 AA — semantic HTML, keyboard navigation, screen readers.

YepAPI/skills

Experiment setup, variant splitting, statistical significance, and feature flag integration.

YepAPI/skills

CRUD generators, data tables, user management, role-based access, and bulk operations.

YepAPI/skills

Monitor what ChatGPT and Gemini say about your brand using YepAPI.

YepAPI/skills

Queue workers with BullMQ/Inngest/Trigger.dev, job retries, dead letter queues, concurrency.

YepAPI/skills

Commander.js, interactive prompts with Clack, spinners, colors, config files, exit codes, and npm publishing.

YepAPI/skills

cmdk integration, Cmd+K trigger, fuzzy search, grouped actions, keyboard navigation, and dynamic action registration.

YepAPI/skills

Content planning with trend and sentiment data from YepAPI.

YepAPI/skills

Content calendar, keyword-driven planning, and content briefs.

YepAPI/skills

Theme switching with CSS variables, system preference detection, next-themes, and persistence.

YepAPI/skills

Threaded comments, @mentions, reactions, moderation queue, optimistic UI, and cursor pagination.

YepAPI/skills

Competitive analysis between domains using YepAPI.

YepAPI/skills

Layout grids, KPI cards, data tables with sorting/filtering, sidebar navigation, and responsive breakpoints.

YepAPI/skills

Data encryption — TLS everywhere, AES-256-GCM for PII, bcrypt passwords, encrypted backups.

YepAPI/skills

Chart patterns with Recharts/Nivo/D3, responsive containers, color scales, and accessibility.

YepAPI/skills

Drizzle schema definition, push vs migrate, type-safe queries, relations, transactions, and prepared statements.

YepAPI/skills

Upload handling, resize/compress, CDN delivery, blur placeholders, and next/image patterns.

YepAPI/skills

Local business and Google Maps research using YepAPI.

YepAPI/skills

Cursor-based pagination, IntersectionObserver, virtualized lists with @tanstack/react-virtual, and scroll position restoration.

YepAPI/skills

Chat UI components, streaming responses with AI SDK, context window management, and RAG patterns.

相關技能