Next.js 的服务器端缓存实现方式-FunTeaLearn Online Web Tutorials

在前端开发中，服务器端缓存可以显著提高网站性能和用户体验。Next.js 是一个流行的 React 框架，它提供了多种服务器端缓存实现方式。本文将介绍 Next.js 的服务器端缓存实现方式，包括缓存策略、缓存控制和缓存清除，并提供示例代码和指导意义。

缓存策略

Next.js 的服务器端缓存策略基于 HTTP 缓存控制。HTTP 缓存控制有两种方式：缓存头和响应码。缓存头是通过响应头中的 Cache-Control 和 Expires 字段控制的。响应码是通过服务器返回的 HTTP 状态码控制的。

Next.js 支持以下缓存头：

max-age：指定缓存的最长时间（以秒为单位）。
s-maxage：指定缓存的最长时间（以秒为单位），仅适用于共享缓存（如 CDN）。
public：指定缓存响应可以被任何中间人（如 CDN）缓存。
private：指定缓存响应只能被终端用户浏览器缓存。
no-cache：指定缓存响应需要重新验证，但仍可以被缓存。
no-store：指定缓存响应不应被缓存或存储。

Next.js 支持以下响应码：

200 OK：表示响应内容已被缓存。
304 Not Modified：表示响应内容未被修改，可以从缓存中读取。
404 Not Found：表示响应内容不存在，不应被缓存。

缓存控制

Next.js 的缓存控制可以通过以下方式实现：

1. 缓存静态资源

Next.js 可以将静态资源（如图片、CSS 和 JavaScript 文件）缓存到 CDN 或浏览器中。这可以通过设置 webpack 配置文件中的 output.publicPath 选项和 optimization.splitChunks.cacheGroups 选项实现。例如，以下配置文件将静态资源缓存到名为 static 的文件夹中：

// www.javascriptcn.com code example
module.exports = {
  output: {
    publicPath: '/static/',
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
        vendors: {
          name: 'vendors',
          test: /[\\/]node_modules[\\/]/,
          chunks: 'all',
        },
      },
    },
  },
};

2. 缓存动态页面

Next.js 可以将动态页面（如博客文章和产品列表）缓存到服务器或 CDN 中。这可以通过设置 getServerSideProps 或 getStaticProps 函数中的 revalidate 选项实现。例如，以下代码将动态页面缓存 60 秒：

// www.javascriptcn.com code example
export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/posts/${context.params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    revalidate: 60,
  };
}

3. 缓存 API 响应

Next.js 可以将 API 响应缓存到服务器或 CDN 中。这可以通过设置 getServerSideProps 或 getStaticProps 函数中的 cache 选项实现。例如，以下代码将 API 响应缓存 60 秒：

// www.javascriptcn.com code example
export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/posts/${context.params.id}`, {
    headers: {
      'Cache-Control': 's-maxage=60',
    },
  });
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

缓存清除

Next.js 的缓存清除可以通过以下方式实现：

1. 缓存版本控制

Next.js 支持缓存版本控制，可以通过更改应用程序版本号来强制缓存清除。这可以通过在 package.json 文件中设置 version 字段实现。例如，以下代码将应用程序版本号设置为 1.0.0：

// www.javascriptcn.com code example
{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "next": "^11.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

2. 缓存清除 API

Next.js 支持缓存清除 API，可以通过向服务器发送 POST 请求来清除缓存。这可以通过设置 api 路由和 cache.clear 方法实现。例如，以下代码将缓存清除 API 定义为 /api/cache/clear：

// www.javascriptcn.com code example
// pages/api/cache/clear.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    res.status(200).json({ message: 'Cache cleared' });
    cache.clear();
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

示例代码

以下代码演示了如何在 Next.js 中实现服务器端缓存：

// www.javascriptcn.com code example
// pages/index.js
export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/posts', {
    headers: {
      'Cache-Control': 's-maxage=60',
    },
  });
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    revalidate: 60,
  };
}

export default function Home({ posts }) {
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

在上面的代码中，getServerSideProps 函数将 API 响应缓存 60 秒，并返回帖子列表。Home 组件将帖子列表渲染为无序列表。

指导意义

本文介绍了 Next.js 的服务器端缓存实现方式，包括缓存策略、缓存控制和缓存清除，并提供了示例代码和指导意义。通过使用 Next.js 的服务器端缓存，可以显著提高网站性能和用户体验。在实现服务器端缓存时，需要注意缓存策略、缓存控制和缓存清除，以确保缓存效果最佳。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d2a842a941bf713451d637

Next.js 的服务器端缓存实现方式