Next.js第八课 - 缓存机制

前面几节我们学习了数据获取和数据变更本节来深入了解 Next.js 的缓存机制。缓存是提升应用性能的关键技术用好了能让你的应用速度提升好几倍。缓存架构Next.js 使用多层缓存来优化性能理解这个架构很重要请求流程: 浏览器 → CDN/边缘缓存 → Next.js 数据缓存 → 数据源缓存层级浏览器缓存 - 客户端存储CDN/边缘缓存 - Vercel Edge NetworkNext.js 数据缓存 - 服务器端缓存完全动态请求 - 每次都获取新数据每一层缓存都有自己的作用合理配置能让应用性能最优。数据缓存默认缓存行为在 Next.js 中fetch请求默认会被缓存// 默认缓存 export default async function Page() { const res await fetch(https://api.example.com/data) const data await res.json() return div{data.title}/div }缓存选项禁用缓存如果需要实时数据可以完全禁用缓存export default async function Page() { const res await fetch(https://api.example.com/data, { cache: no-store, }) const data await res.json() return div{data.title}/div }设置缓存时间最常用的是设置缓存过期时间export default async function Page() { // 缓存 10 秒 const res await fetch(https://api.example.com/data, { next: { revalidate: 10 }, }) const data await res.json() return div{data.title}/div }基于标签的缓存标签缓存是一个很强大的特性它允许你按标签批量清除缓存。添加缓存标签export default async function PostsPage() { const posts await fetch(https://api.example.com/posts, { next: { tags: [posts, blog] }, }).then((res) res.json()) return PostList posts{posts} / }重新验证标签当数据更新时可以按标签清除缓存use server import { revalidateTag } from next/cache export async function createPost() { // 创建新文章 await db.post.create({ /* ... */ }) // 重新验证所有带 posts 标签的缓存 revalidateTag(posts) }多个标签一个请求可以有多个标签// 获取时添加多个标签 const data await fetch(https://api.com/dashboard, { next: { tags: [dashboard, analytics, user-123] }, }) // 可以单独重新验证 revalidateTag(dashboard) revalidateTag(analytics)基于路径的缓存除了标签还可以按路径重新验证缓存use server import { revalidatePath } from next/cache export async function updatePost(id: string, data: FormData) { // 更新文章 await db.post.update({ where: { id }, data: { title: data.get(title) }, }) // 重新验证相关页面 revalidatePath(/posts) revalidatePath(/posts/${id}) revalidatePath(/) // 首页也可能显示文章 }时间基础重新验证页面级配置整个页面设置缓存时间// app/posts/page.tsx export const revalidate 3600 // 1 小时 export default async function PostsPage() { const posts await getPosts() return PostList posts{posts} / }特定请求配置不同请求使用不同的缓存策略async function getFreshData() { const res await fetch(https://api.com/data, { next: { revalidate: 0 }, }) return res.json() } async function getCachedData() { const res await fetch(https://api.com/data, { next: { revalidate: 3600 }, }) return res.json() }缓存策略根据数据特性选择合适的缓存策略静态内容适合博客文章、产品页面等不经常变化的内容// 适合博客文章、产品页面 export const revalidate 3600 // 1 小时 export default async function BlogPage() { const posts await fetch(https://api.com/posts, { next: { revalidate: 3600 }, }).then((res) res.json()) return PostList posts{posts} / }动态内容适合用户数据、实时统计等需要最新数据的内容// 适合用户数据、实时统计 export const dynamic force-dynamic export default async function DashboardPage() { const stats await fetch(https://api.com/stats, { cache: no-store, }).then((res) res.json()) return Stats data{stats} / }按需重新验证适合内容更新不频繁但需要快速生效的场景// 适合内容更新不频繁 export const revalidate 86400 // 24 小时 // 当内容更新时手动触发 // app/api/revalidate/route.ts import { revalidateTag } from next/cache export async function POST(request: Request) { const { tag } await request.json() revalidateTag(tag) return Response.json({ revalidated: true }) }缓存实用技巧这里分享几个在缓存配置中特别实用的技巧。根据数据特性选择策略实际开发中,根据数据更新频率选择合适的缓存策略特别重要:// 静态内容可以长时间缓存 export const revalidate 86400 // 24 小时 const staticData await fetch(https://api.com/static, { next: { revalidate: 86400 }, }) // 频繁更新的内容建议短时间缓存 const frequentlyUpdated await fetch(https://api.com/frequent, { next: { revalidate: 60 }, }) // 实时数据最好不缓存 const realtimeData await fetch(https://api.com/realtime, { cache: no-store, })使用标签进行精确控制这个技巧在实际项目中特别有用——使用标签可以更精确地控制缓存:// 推荐这样做 - 使用标签进行精确控制 const posts await fetch(https://api.com/posts, { next: { tags: [posts, blog] }, }) // 当创建新文章时,只重新验证相关缓存 revalidateTag(posts) // 尽量避免这种情况 - 使用路径可能重新验证过多内容 revalidatePath(/posts)分层缓存策略这里有个小建议:不同层级可以使用不同的缓存时间,这样更灵活:// 页面级别使用较长缓存 export const revalidate 3600 // 组件级别使用较短缓存 async function PostList() { const posts await fetch(https://api.com/posts, { next: { revalidate: 600 }, }) return div{/* ... */}/div } // 实时数据调用不缓存 async function getUserActivity() { const activity await fetch(https://api.com/activity, { cache: no-store, }) return div{/* ... */}/div }不同场景的缓存策略电商网站// 产品列表 - 中等缓存 export const revalidate 1800 // 30 分钟 // 产品详情 - 短缓存库存可能变化 export const revalidate 60 // 1 分钟 // 用户购物车 - 不缓存 export const dynamic force-dynamic // 静态内容关于页面等- 长缓存 export const revalidate 86400 // 24 小时新闻网站// 文章列表 - 短缓存 export const revalidate 300 // 5 分钟 // 文章详情 - 发布后不变化 export const revalidate 86400 // 24 小时 // 实时新闻 - 不缓存 export const dynamic force-dynamic社交媒体// 用户资料 - 中等缓存 export const revalidate 600 // 10 分钟 // 用户帖子 - 短缓存 export const revalidate 60 // 1 分钟 // 通知 - 不缓存 export const dynamic force-dynamic总结本节我们深入了解了 Next.js 的缓存机制包括多层缓存架构、基于标签和路径的缓存、不同的缓存策略等。合理使用缓存能让你的应用性能大幅提升但也要注意根据数据特性选择合适的缓存策略。如果你对本节内容有任何疑问欢迎在评论区提出来我们一起学习讨论。原文地址https://blog.uuhb.cn/archives/next-js-08.html