Next.js 如何进行缓存优化？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. 静态生成 (Static Generation)

静态生成是 Next.js 中最常用的缓存优化方式之一。通过 getStaticProps 和 getStaticPaths，你可以在构建时生成静态页面。这些页面可以被 CDN 缓存，从而加快页面加载速度。

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

2. 服务器端渲染 (Server-Side Rendering)

服务器端渲染在每次请求时生成页面，虽然不能直接缓存页面内容，但可以通过缓存 API 响应来优化性能。

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

3. 客户端缓存

使用 SWR 或 React Query 等库在客户端缓存数据，减少对服务器的重复请求。

// www.javascriptcn.com code example
import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;
  return <div>Hello {data.name}!</div>;
}

4. CDN 缓存

配置 CDN 缓存策略，缓存静态资源和页面，减少服务器负载。可以通过设置 Cache-Control 头来控制缓存行为。

res.setHeader('Cache-Control', 'public, max-age=3600');

5. Incremental Static Regeneration (ISR)

ISR 允许你在页面被请求时重新生成静态页面，同时保持页面的缓存状态，确保用户始终看到最新的内容。

// www.javascriptcn.com code example
export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: {
      data,
    },
    revalidate: 10, // 每10秒重新生成页面
  };
}

6. API 路由缓存

在 API 路由中使用 Cache-Control 头来缓存 API 响应，减少重复计算和数据库查询。

export default function handler(req, res) {
  res.setHeader('Cache-Control', 'public, max-age=3600');
  res.status(200).json({ data: 'cached data' });
}

通过以上方式，你可以在 Next.js 中有效地进行缓存优化，提升应用的性能和用户体验。

Next.js 如何进行缓存优化？

推荐答案