Nuxt中使用缓存控制提升网站性能

缓存非常重要，因为它通过存储经常访问的数据或内容，加快了数据检索速度，从而提高了系统的性能和效率，减少了反复生成或获取信息的需求。它通过减少加载时间和减少对后端系统的压力，提升了用户的体验感受。

在这篇文章中，我想向你介绍 Nuxt 中的 Cache-Control 头部，这样你就能指导浏览器如何缓存某些页面，从而提升性能。

享受一下！

Cache-Control HTTP头部包含用于请求和响应的缓存策略。出现在请求中的某个指令不一定也会出现在响应中。

• Private -仅在客户端缓存
• Public -还可以在代理中缓存
• no-store -内容不会被缓存
• no-cache -内容可以被缓存，但服务器需要重新验证
• max-age -告诉浏览器缓存保留一定秒数

更多关于这些规范的指导, 可以在这里查看开发者 Mozilla。

使用 Nuxt 中的缓存策略来提高性能 🟢

混合渲染允许为每条路由使用路由规则设置不同的缓存规则，使用路由规则来决定服务器应该如何响应给定 URL 的新请求。Nuxt 服务器会自动注册相应的中间件程序，并使用 Nitro 缓存层将路由包裹上缓存处理器。

    export default defineNuxtConfig({
      路由规则配置: {
        '/': {
          SWR: true,
          缓存设置: {
            最长缓存时间: 60
          }
        },
        '/products': {
          SWR: 3600
        }
      }
    })

切换到全屏模式，切换回正常模式

在上面的例子中，产品页面根据需求生成，在后台重新验证，缓存时间为1小时（也就是3600秒）。

什么是swr？
Stale-While-Revalidate扩展功能会在服务器响应中添加缓存头，并根据可配置的TTL（生存时间）在服务器或反向代理上缓存响应。Nitro的节点服务器预设能够缓存整个响应。当TTL过期时，会先发送缓存的响应，同时在后台重新生成页面。如果设置为true，则会添加stale-while-revalidate头，而不会添加MaxAge。

这是 Nuxt 中最常见的 Web 缓存用法，但我们也能自定义规则，如下所示：

export default defineNuxtConfig({
  // 定义 Nuxt 配置
  routeRules: {
    '/categories': {
      // 设置路由规则
      headers: {
        // 设置请求头
        'Cache-Control': 'max-age=600 Public' // 设置缓存控制策略
      }
   } 
})

全屏：按[对应的按键或菜单项]来进入或退出

所有可用的缓存选项可以在这里查看【此处】(https://nitro.build/guide/cache)。

如果你想了解更多关于 Vue、Nuxt、JavaScript 或其他有用的技术，可以通过点击这个 链接 或者图片访问我们的 VueSchool：

(链接)

它涵盖了在构建现代 Vue 或 Nuxt 应用程序时最重要的概念，这些概念在你的日常工作或业余项目中都能帮助你 😉

如果您想了解更多关于缓存技术的话题，可以参考以下资料：

• https://dev.to/ymir/mastering-caching-in-nuxt-3-a-comprehensive-guide-22ea
• https://masteringnuxt.com/blog/writing-a-cache-composable-in-nuxt-3
• https://nuxt-multi-cache.dulnan.net/
• https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering
• https://dev.to/jacobandrewsky/leveraging-cache-in-vuejs-and-nuxtjs-4b26/edit

干得好！你刚刚学会了如何用Nuxt Image和Nuxt Cloudinary模块提供高性能图片。

保重身体，下次再聊！

一如既往，祝你编程愉快，PCODE🖥️