Next.js 应用中如何实现前端缓存？-JavaScript中文网-JavaScript教程资源分享门户

前言

缓存是 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），从而避免了客户端请求的开销。

-- -------------------- ---- -------
------ ----- -------- ---------------- -
  ----- ---- - ----- ------------
  ------ -
    ------ -
      ----
    --
    -- -- -----------
    ----------- --
  --
-

export async function getServerSideProps(context) {
  const data = await fetchData();
  return {
    props: {
      data
    }
  };
}

在客户端，可以使用 Next.js 的内置 SWR 库（Stale-While-Revalidate）来实现缓存。例如：

import { useSWR } from 'swr';

function Dashboard() {
  const { data } = useSWR('/api/data', fetch);
  // ...
}

这里的 useSWR 会在客户端缓存请求响应，并在后台更新数据。缓存时间默认为 60 秒，也可以通过 revalidateOnMount 和 revalidateOnFocus 指定重新验证策略。

2. 协商缓存

为了进行协商缓存，我们需要设置 Last-Modified 和 ETag HTTP 响应头。

在 Next.js 的 API 路由中，我们可以添加下面的 HTTP 响应头部为客户端提供缓存控制：

-- -------------------- ---- -------
------ ------- ----- ---- -- -
  ----- ---- - ----------
  ----- ------------ - --- ------------------------
  ----- ---- - --------------------------------------------------------------------

  ------------------------------ -------- ------------- ------------------
  ------------------------------ ----------------------------
  --------------------- ------

  -- ----------------------------- --- ---- -- -------------------------------- --- --------------------------- -
    -- ---------- --- ---
    ------ ----------------------
  - ---- -
    ------ ---------------------- ---- ---
  -
--

在客户端，可以使用 rswr 轻松地从服务器获取数据，并设置传递内容计算的 MD5 哈希值作为 ETag：

import rswr from 'rswr';

function Dashboard() {
  const { data } = rswr('/api/data', fetch);

  // ...
}

结论

前端缓存是构建更高效和性能更佳的应用程序的关键。在 Next.js 应用中，我们可以使用内置的缓存机制和 HTTP 响应头来实现前端缓存。实现前端缓存的的好处是减少了请求时间和服务器负载，提升了应用的性能。我们可以灵活地选择强制缓存和协商缓存，使我们的应用更加可靠和高效。

参考资料

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66ef5e566fbf9601972ee7e7