面试题：复杂业务场景下 Next.js 的 getServerSideProps 与其他数据获取方法的协同使用

对于实时数据（如当前用户购物车数量）：
- 使用客户端数据获取方法，即在 useEffect 中使用 fetch。
- 原因是实时数据需要根据用户操作实时更新，getServerSideProps 和 getStaticProps 无法满足实时性要求。在客户端，每当组件挂载或特定依赖项变化时，useEffect 中的 fetch 会发起请求获取最新的购物车数量数据，并更新组件状态，从而实现实时展示。例如：

import React, { useEffect, useState } from'react';

const CartComponent = () => {
  const [cartCount, setCartCount] = useState(0);

  useEffect(() => {
    const fetchCartCount = async () => {
      const response = await fetch('/api/cart/count');
      const data = await response.json();
      setCartCount(data.count);
    };
    fetchCartCount();
  }, []);

  return (
    <div>
      购物车数量: {cartCount}
    </div>
  );
};

export default CartComponent;

对于更新频率较低的数据（如商品分类列表）：
- 使用 getStaticProps。
- 因为商品分类列表数据更新不频繁，getStaticProps 会在构建时或重新验证时获取数据，并将其作为 props 传递给页面组件。这样可以在构建阶段生成静态 HTML 页面，提高页面加载速度。同时，Next.js 支持增量静态再生，可以设置 revalidate 时间，在指定时间后重新验证数据，确保数据的相对时效性。例如：

export async function getStaticProps() {
  const response = await fetch('/api/categories');
  const data = await response.json();

  return {
    props: {
      categories: data.categories
    },
    revalidate: 60 * 60 * 24 // 每天重新验证一次
  };
}

const CategoryPage = ({ categories }) => {
  return (
    <div>
      <h1>商品分类列表</h1>
      <ul>
        {categories.map(category => (
          <li key={category.id}>{category.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default CategoryPage;

对于需要动态数据但并非实时的页面：
- 使用 getServerSideProps。
- 例如，某些商品详情页可能依赖于动态参数（如商品 ID）从数据库获取特定商品的详细信息。getServerSideProps 会在每次请求页面时在服务器端运行，确保获取到最新的商品数据。但由于是在服务器端运行，相比 getStaticProps 构建静态页面，性能上会稍逊一筹，所以适用于那些数据变化相对频繁但不需要实时更新的场景。例如：

export async function getServerSideProps(context) {
  const productId = context.query.productId;
  const response = await fetch(`/api/products/${productId}`);
  const data = await response.json();

  return {
    props: {
      product: data.product
    }
  };
}

const ProductPage = ({ product }) => {
  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
    </div>
  );
};

export default ProductPage;

通过合理选择 getServerSideProps、getStaticProps 和客户端数据获取方法，能在大型电商平台的 Next.js 项目中实现最佳的性能与用户体验平衡。

星途面试题库

面试题：复杂业务场景下 Next.js 的 getServerSideProps 与其他数据获取方法的协同使用

知识考点

面试题答案