Next.js 中 getStaticProps 和 getServerSideProps 的区别及使用场景

题目

Next.js 中 getStaticProps 和 getServerSideProps 的区别及使用场景

信息

• 类型：问答
• 难度：⭐

考点

数据获取方法,静态生成与服务器端渲染,使用场景

快速回答

两种数据获取方法的区别：

• getStaticProps：构建时获取数据，生成静态页面
• getServerSideProps：每次请求时获取数据，服务端实时渲染

使用场景：

• 静态页面（如博客、产品页）用 getStaticProps
• 动态数据（如用户仪表盘）用 getServerSideProps

1. 核心区别

getStaticProps 在构建时运行，生成静态 HTML 文件：

• 数据在构建阶段一次性获取
• 生成的页面可被 CDN 缓存
• 支持通过 revalidate 实现增量静态再生（ISR）

getServerSideProps 在每次页面请求时运行：

• 数据在服务端实时获取
• 每次请求都返回最新数据
• 无法被 CDN 缓存

2. 代码示例

getStaticProps 示例：

// 页面构建时执行
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return {
    props: { products }, // 传递给页面组件
    revalidate: 60 // 每60秒重新生成页面（ISR）
  };
}

// 页面组件
function ProductsPage({ products }) {
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

getServerSideProps 示例：

// 每次请求时执行
export async function getServerSideProps(context) {
  const { req, res } = context;
  const userData = await fetchUserData(req.cookies.token);

  return {
    props: { userData } // 传递给页面组件
  };
}

// 页面组件
function Dashboard({ userData }) {
  return (
    <div>
      <h1>Welcome, {userData.name}</h1>
      <p>Last login: {userData.lastLogin}</p>
    </div>
  );
}

3. 使用场景对比

4. 最佳实践

• 优先使用 getStaticProps + ISR 提升性能
• 对用户个性化数据使用 getServerSideProps
• 混合使用：静态生成大部分内容，客户端获取动态部分
• 避免在 getStaticProps 中访问用户特定信息

5. 常见错误

• ❌ 在静态页面中使用敏感的用户凭证
• ❌ 对高频更新数据使用 getStaticProps 且未设置 revalidate
• ❌ 在客户端组件中使用这些方法（仅限页面组件）
• ❌ 忘记处理数据获取错误状态

6. 扩展知识

• 增量静态再生 (ISR)：Next.js 9.5+ 允许在构建后更新静态页面
• 客户端数据获取：使用 useEffect + fetch 处理用户交互后的数据更新
• 混合模式：

  // 示例：静态生成 + 客户端补充
  export default function Page({ staticData }) {
    const [dynamicData, setData] = useState(null);
  
    useEffect(() => {
      fetch('/api/dynamic-data')
        .then(res => res.json())
        .then(setData);
    }, []);
  
    return (
      <>
        <StaticContent data={staticData} />
        {dynamicData && <DynamicContent data={dynamicData} />}
      </>
    );
  }