如何在Next.js中关闭缓存：全面指南

Next.js，一个基于 React 的框架，被广泛用于构建快速且可扩展的 web 应用程序。虽然 Next.js 的缓存通过快速提供静态资源来提升性能，但在开发、测试或调试时，有时需要禁用缓存。本指南将介绍如何在 Next.js 中禁用缓存，并提供有效管理缓存的最佳实践，

静态资源缓存（静态文件缓存）:

• Next.js 会缓存静态文件，如 CSS、JS 和图片，来加快加载速度。

服务器端渲染技术（SSR）缓存：

• 服务器重复使用渲染过的页面来节省处理时间。

浏览器上的缓存

• 例如，将资源存放在浏览器里以避免重复下载。

增量静态重生成（ISR）缓存。

• 定期地根据 revalidate 属性的设定重建静态页面内容。

为了确保浏览器不缓存内容，可以在 Next.js API 路由或服务器响应中设置缓存控制头（Cache-Control）。

例子：设置缓存控制：

在 next.config.js 文件中，可以使用 headers 函数。

    module.exports = {  
        async headers() {  
            return [  
                {  
                    source: '/:path*', // 匹配所有路径  
                    headers: [  
                        { key: 'Cache-Control', value: 'no-store, no-cache, must-revalidate, proxy-revalidate' },  
                        { key: 'Pragma', value: 'no-cache' },  
                        { key: 'Expires', value: '0' },  
                    ],  
                },  
            ];  
        },  
    };

这有什么用:

• 防止浏览器为指定的路径缓存的资源。

增量静态再生功能（ISR）允许 Next.js 在运行时更新静态页面，要禁用 ISR 的缓存功能，请将 revalidate 设置为 0。

例如:

     export async function getStaticProps() {  
        return {  
            props: { data: '数据如下' },  
            revalidate: 0, // 禁用重新生成  
        };  
    }

效果是:

• 这会页面将在每个请求时静态重生成，从而有效地禁用 ISR。

第三步：停用静态文件缓存机制

如果你从 public 目录提供静态文件，你可以通过设置自定义头部来防止它们被缓存。

为静态文件自定义头部信息

在 next.config.js 中添加 headers 函数：

    module.exports = {  
        async headers() {  
            return [  
                {  
                    source: '/static/:path*', // 静态文件夹中的文件匹配  
                    headers: [  
                        { key: 'Cache-Control', value: 'no-cache, no-store, must-revalidate' }, // 设置缓存控制，禁止缓存，不允许存储，必须重新验证  
                    ],  
                },  
            ];  
        },  
    };

对于 API 路由的，直接在响应中添加头部信息以禁用缓存功能。

例如:

     export default function handler(req, res) {  
        res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');  
        res.setHeader('Pragma', 'no-cache');  
        res.setHeader('Expires', '0');  
        res.status(200).json({ message: '缓存已关闭' });  
    }

对于由服务器端渲染的页面，你可以通过添加 Cache-Control 头来禁用页面缓存功能，进一步明确禁用的是页面缓存。

示例:

export async function getServerSideProps(context) {  
    context.res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate'); // 缓存控制头，用于禁止缓存和强制重新验证
    return {  
        props: { data: '您的SSR数据如下' }, // 您的服务端渲染数据如下
    };  
}

效果为:

• 确保每次请求都获取并提供最新的数据。

如果变化没有立刻显示，清除浏览器缓存或强制刷新页面。

如何清理浏览器缓存的步骤:

1. 打开浏览器开发者工具（Ctrl + Shift + I 或 Cmd + Option + I）。
2. 点击 网络 选项卡。
3. 勾选 禁用缓存 选项。
4. 刷新页面。

发展：

• 使用 next dev 来启动开发服务器，该命令会自动禁用大多数缓存，以确保开发过程中的灵活性。

测试API的响应：

• 在API相关的路由中添加no-cache头信息。

动态内容页

• 使用 getServerSideProps 并添加 no-store 头来实现实时更新。

生产中的重要更新 :

• 清空 CDN 缓存或设置为 'Cache-Control: no-store'。

更改未反映

• 解决方法：清理浏览器缓存或使用 Cache-Control 首部。

静态资源文件缓存时间太长:

• 解决方法：通过添加自定义头来关闭静态文件的缓存。

CDN 过时资源缓存

• 在部署更新前清理 CDN 缓存。

选择性缓存:

• 仅关闭动态或频繁变化内容的缓存功能。

合理利用**revalidate**：

• 调整 ISR 的 revalidate 间隔，使其适当来平衡性能与数据的新鲜度。

为重要更新清除 CDN 缓存:

• 在部署更新时，记得刷新CDN缓存。

充分利用浏览器功能:

• 在开发时，使用浏览器的禁用缓存功能以确保内容是新鲜的。

在使用 Next.js 进行开发、调试和提供动态内容时，禁用缓存是必不可少的。可以通过使用 Cache-Control 标头、禁用 ISR 以及静态文件缓存，并利用浏览器工具如开发者工具，你可以确保应用程序始终提供最新的信息或内容。参考本指南中的最佳实践来有效管理缓存，以实现性能与实时准确性的平衡。