在现代的 Web 开发中，缓存是一个很重要的话题。通过缓存可以提高网站的性能，减少服务器压力，也可以降低用户的等待时间。在这方面，Next.js 提供了一种非常方便的方法来实现长效缓存。
什么是长效缓存？
长效缓存是指将站点的资源缓存到用户的浏览器中，以避免重复加载。这通常涉及到在文件名中添加哈希或版本号，在资源更改后使其无法匹配缓存并强制其重新加载。
Next.js 中的缓存机制
Next.js 已经内置了缓存机制。在开发模式下，所有的页面都会被缓存，这样可以避免在每次请求时都重新渲染页面。但是在生产环境下，缓存机制则要更加智能。Next.js 会为每个页面生成一个唯一的哈希（由页面的代码和依赖项计算得出），并将此哈希用于缓存。如果页面中的任何内容发生更改，其哈希也会更改。这意味着客户端会强制重新获取新的页面，并更新缓存。
Next.js 还提供了一些从 CDN 缓存中获取资源的选项。对于需要经常变化的内容（如 user-avatar 或图片），可以使用缓存控制标头来确保 CDN 缓存的资源始终保持最新状态。
实现长效缓存的最佳方式
为了实现长效缓存，我们需要：
- 将哈希或版本号添加到文件名中
- 配置文件的缓存控制标头
让我们假设我们有一个名为“home”的页面和一个 JavaScript 文件“app.js”，下面是我们可以使用的方法将其缓存：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ --- ---- ----------- ------ ---- ---- ------------ ------ - --------- - ---- ------ ------ ------- ----- ----- ------- --- - -------- - ----- - ---------- --------- - - ----------- ----- ------- - ------------------------------ ------ - -- ------ ----- -------------------------- ------------------ -- ----- -------------------- ------------ -- ----- ------------------- ------------------ -- ------- ---------- -------- ------------------ ----- ------------------ ----- ---------------------- ----- ---------------- -- -------- ----- -- ------------------- -- ---------- -- - ---------- -------------- -- ------------ --- -- - - ------ -------- ---------------- - ------ - ------ - -------- ------------------------------ -- -- -展开代码
上述代码中的关键点有：
- 头部标签中添加了缓存控制标头，这将确保页面始终从服务器中获取
- 使用了
getStaticProps函数获取 buildId，它将在页面的哈希函数中使用 SWRConfig组件旨在确保所有页面在加载之前都会进行数据提取
此外，我们可以在“next.config.js”文件中使用以下代码块将哈希添加到文件名中：
-- -------------------- ---- ------- ----- - ------------------------- ---------------------- - - -------------------------- -------------- - ------- - ------------- -- -- - ----- ------ - - ----------------- ---------------- ------ -- -- ------ --- ------------------------- - --------------------------- - -------- -- - ------------------- - - ----- ----- ----------------- ---- -- ------ ------- -- - -- ------ --- ----------------------- - ------------------ - ------------------------------------------ -------------- - --------------------------- -------------------- - ----- - ------ ------- --展开代码
上述代码中的关键点有：
- 在“PHASE_PRODUCTION_BUILD”中，我们在“assetPrefix”中添加了哈希，这使得浏览器会重新加载页面，从而在 web 服务器的缓存中更新页面。
- 我们还在“distDir”中添加了哈希
结语
使用 Next.js 实现长效缓存的最佳方法是添加哈希或版本号，将其配置到缓存控制标头中，并将其添加到资源的文件名中。在“next.config.js”文件中添加 assetPrefix 以确保浏览器重新加载页面，并用新的缓存更新 web 服务器。通过这些简单的步骤，您可以轻松地实现长期缓存，并为用户提供更快、更高效的浏览体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d83236a941bf7134ea4661
