Next.js 14 App Router中getServerSideProps等函数的等效方案及axios问题

一、原 getServerSideProps / getStaticProps 的替代方案 #

在 App Router 里，Next.js 不再依赖专门的getServerSideProps/getStaticProps函数，而是通过原生fetch的缓存配置或组件导出的静态配置来控制渲染策略：

• SSG（静态站点生成，对应原 getStaticProps）：默认情况下，组件中的fetch请求会自动缓存（等同于设置cache: 'force-cache'），构建阶段就会预渲染页面并把内容缓存起来，和原SSG逻辑完全一致。
• SSR（服务端渲染，对应原 getServerSideProps）：给fetch加上cache: 'no-store'配置，或者在组件顶部导出export const dynamic = 'force-dynamic'，这样每次用户请求时，服务端都会重新获取数据并渲染页面，实现实时渲染效果。
• ISR（增量静态再生，对应原 getStaticProps + revalidate）：在fetch请求中添加next: { revalidate: 3600 }（数字为缓存有效期，单位秒），或者在组件顶部导出export const revalidate = 3600，页面会先静态缓存，到期后自动重新生成内容，实现增量更新。

二、用 axios 实现相同渲染行为 #

Next.js 的缓存策略默认绑定原生fetch，用 axios 时需要手动通过unstable_cache函数或请求头配置来实现对应逻辑：

1. 实现 SSG（静态缓存） #

用unstable_cache包裹 axios 请求，设置永久缓存：

import axios from 'axios';
import { unstable_cache } from 'next/cache';

// 封装带缓存的axios请求
const fetchStaticData = unstable_cache(
  async () => {
    const response = await axios.get('https://api.example.com/static-data');
    return response.data;
  },
  ['static-data-key'], // 唯一缓存键，用于区分不同缓存内容
  { revalidate: false } // 永久缓存，对应SSG
);

export default async function StaticPage() {
  const data = await fetchStaticData();
  return <div>{JSON.stringify(data)}</div>;
}

2. 实现 SSR（实时渲染） #

通过dynamic配置或unstable_cache设置不缓存：

import axios from 'axios';
import { unstable_cache } from 'next/cache';

// 强制页面动态渲染，每次请求都重新获取数据
export const dynamic = 'force-dynamic';

const fetchDynamicData = unstable_cache(
  async () => {
    const response = await axios.get('https://api.example.com/dynamic-data');
    return response.data;
  },
  ['dynamic-data-key'],
  { revalidate: 0 } // 不缓存，每次请求重新获取
);

export default async function DynamicPage() {
  const data = await fetchDynamicData();
  return <div>{JSON.stringify(data)}</div>;
}

3. 实现 ISR（增量再生） #

用unstable_cache设置缓存有效期：

import axios from 'axios';
import { unstable_cache } from 'next/cache';

const fetchISRData = unstable_cache(
  async () => {
    const response = await axios.get('https://api.example.com/isr-data');
    return response.data;
  },
  ['isr-data-key'],
  { revalidate: 3600 } // 缓存1小时后自动重新生成
);

export default async function ISRPage() {
  const data = await fetchISRData();
  return <div>{JSON.stringify(data)}</div>;
}

也可以通过设置Cache-Control请求头实现ISR，比如：

const response = await axios.get('https://api.example.com/isr-data', {
  headers: {
    'Cache-Control': 's-maxage=3600, stale-while-revalidate'
  }
});

不过这种方式不如unstable_cache直观，更推荐前者。

内容的提问来源于stack exchange，提问作者Netanel Vaknin