Next.js 13中如何用Axios实现SSG？缓存问题求助

核心问题梳理 #

你用fetch({cache: 'force-cache'})做SSG时数据不更新，本质是纯SSG页面是构建阶段生成的静态文件，除非重新执行构建命令，否则不会主动拉取新数据。而no-store会切换成每次请求都实时拉取数据的SSR模式，确实不符合博客站点的性能需求。

用Axios实现SSG的核心逻辑和fetch一致：在构建阶段（generateStaticParams和页面组件中）执行数据请求，生成静态页面；如果需要数据自动更新，搭配Next.js的**增量静态再生（ISR）**即可，无需全量重构就能更新页面。

实现步骤 #

1. 安装Axios #

先在项目中安装Axios依赖：

npm install axios
# 或使用yarn
yarn add axios

2. 用Axios改写数据请求 #

将原代码中的fetch替换为Axios，同时保留SSG的核心逻辑：

import Layout_Mobile from "@/components/Layout/DeviceLayout/Layout_Mobile";
import Layout_PC from "@/components/Layout/DeviceLayout/Layout_PC";
import PostDetailPage from "@/components/PostDetailPage/PostDetailPage";
import axios from 'axios';

// 用Axios获取单篇文章详情
const fetchPosts = async (params) => {
  const response = await axios.get(`https://5875183d-18c0-49ad-b99d-8deeb4ded6a9.mock.pstmn.io/posts/${params.slug}`);
  return response.data;
};

// 用Axios获取所有文章ID，用于构建阶段生成静态路由
export const generateStaticParams = async () => {
  const response = await axios.get("https://5875183d-18c0-49ad-b99d-8deeb4ded6a9.mock.pstmn.io/posts");
  return response.data.map((post) => ({
    slug: post.id.toString(),
  }));
};

// 配置ISR（可选，实现数据自动更新）
export const revalidate = 86400; // 每24小时后台自动重新生成页面（单位：秒）

const page = async ({ params }) => {
  const { title, summary, content, author, createdAt } = await fetchPosts(params);

  return (
    <div>
      <Layout_Mobile></Layout_Mobile>
      <Layout_PC>
        <PostDetailPage
          title={title}
          description={summary}
          content={content}
          author={author}
          date={createdAt}
        />
      </Layout_PC>
    </div>
  );
};

export default page;

3. 关键细节说明 #

• SSG生效逻辑：generateStaticParams会在构建时执行，生成所有文章对应的静态路由；页面组件中的Axios请求同样在构建阶段完成，数据会被注入到静态HTML文件中，和fetch实现的SSG效果完全一致。
• 数据更新方案：添加export const revalidate = 86400;开启ISR，Next.js会在后台定期重新生成页面，用户访问时能拿到最新数据，同时保留静态页面的性能优势。你可以根据需求调整时间间隔（比如3600代表每小时更新一次）。
• Axios缓存精细化控制：如果需要更灵活的缓存策略，可以给Axios请求添加Cache-Control请求头：

  const response = await axios.get(url, {
    headers: {
      'Cache-Control': 's-maxage=86400, stale-while-revalidate'
    }
  });
  

  这个配置会和Next.js的ISR逻辑配合，实现“优先返回缓存数据，后台异步更新”的效果。

额外提示 #

• 若需要手动触发页面更新（比如发布新文章后立即生效），可以使用Next.js的revalidatePath API在自定义API路由中调用，实现按需再生。
• 确保你的mock服务器返回的响应头没有强制禁止缓存，否则可能影响静态生成的效果。

内容的提问来源于stack exchange，提问作者Choi Chan Hwan