前言
缓存是 web 应用中一种有效的优化措施，减少重复请求的次数和响应时间，提升应用的性能。与后端缓存不同，前端缓存离用户更近，可以最大限度地减少请求时间和服务器负载。本文将介绍 Next.js 应用中前端缓存的实现方法。
什么是前端缓存？
前端缓存是浏览器在请求数据时把数据缓存起来，下次访问相同的数据时直接从缓存中读取，而不需要重新请求。这可以减少服务器的负担，提升应用性能。前端缓存可以分为两种：强制缓存和协商缓存。
强制缓存
强制缓存是指浏览器在一段时间内直接使用缓存中的数据，而不是请求服务器。如果缓存中有数据，那么浏览器会直接使用缓存。如果缓存中没有数据或者缓存过期，那么浏览器会向服务器请求数据，并把新数据缓存起来。缓存的过期时间是通过 Cache-Control 头部控制的。
协商缓存
协商缓存是指浏览器在请求数据时，服务器会根据请求头部的信息（主要是 If-None-Match、If-Modified-Since）来验证数据是否过期。如果缓存仍然有效，服务器仅返回 HTTP 304 Not Modified 状态码，告诉浏览器可以使用缓存。
Next.js 的优点之一是它可提供强大的缓存实现，使我们的应用能够更快，更可靠。我们可以利用 Next.js 的内置缓存机制和 HTTP 响应头来实现前端缓存。
1. 强制缓存
我们可以在 Next.js 的 getStaticProps 和 getServerSideProps 方法中设置缓存的时间。这样做可以指定缓存的时间，并保证请求数据的方式是静态页面生成（getStaticProps）或服务器渲染（getServerSideProps），从而避免了客户端请求的开销。
------ ----- -------- ---------------- -
----- ---- - ----- ------------
------ -
------ -
----
--
-- -- -----------
----------- --
--
------- ----- -------- --------------------------- -
----- ---- - ----- ------------
------ -
------ -
----
-
--
-在客户端，可以使用 Next.js 的内置 SWR 库（Stale-While-Revalidate）来实现缓存。例如：
------ - ------ - ---- ------ -------- ----------- - ----- - ---- - - ------------------- ------- -- --- -
这里的 useSWR 会在客户端缓存请求响应，并在后台更新数据。缓存时间默认为 60 秒，也可以通过 revalidateOnMount 和 revalidateOnFocus 指定重新验证策略。
2. 协商缓存
为了进行协商缓存，我们需要设置 Last-Modified 和 ETag HTTP 响应头。
在 Next.js 的 API 路由中，我们可以添加下面的 HTTP 响应头部为客户端提供缓存控制：
------ ------- ----- ---- -- -
----- ---- - ----------
----- ------------ - --- ------------------------
----- ---- - --------------------------------------------------------------------
------------------------------ -------- ------------- ------------------
------------------------------ ----------------------------
--------------------- ------
-- ----------------------------- --- ---- -- -------------------------------- --- --------------------------- -
-- ---------- --- ---
------ ----------------------
- ---- -
------ ---------------------- ---- ---
-
--在客户端，可以使用 rswr 轻松地从服务器获取数据，并设置传递内容计算的 MD5 哈希值作为 ETag：
------ ---- ---- ------- -------- ----------- - ----- - ---- - - ----------------- ------- -- --- -
结论
前端缓存是构建更高效和性能更佳的应用程序的关键。在 Next.js 应用中，我们可以使用内置的缓存机制和 HTTP 响应头来实现前端缓存。实现前端缓存的的好处是减少了请求时间和服务器负载，提升了应用的性能。我们可以灵活地选择强制缓存和协商缓存，使我们的应用更加可靠和高效。
参考资料
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66ef5e566fbf9601972ee7e7