面试题：Next.js中数据获取策略之getStaticProps和getServerSideProps的应用场景

getStaticProps应用场景

内容驱动型页面：例如博客文章页面，文章内容相对固定，更新频率低。这些页面在构建时获取数据，生成静态HTML，可极大提升性能和SEO。
电子商务产品页面：产品信息短期内不会频繁变动，在构建阶段获取产品详情数据，生成静态页面，有利于搜索引擎索引和快速加载。

示例：一个展示公司介绍的页面，公司信息很少变动。

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/company-info');
  const data = await res.json();
  return {
    props: {
      companyInfo: data
    },
    revalidate: 60 * 60 * 24 // 一天后重新验证
  }
}

const CompanyPage = ({ companyInfo }) => {
  return (
    <div>
      <h1>{companyInfo.name}</h1>
      <p>{companyInfo.description}</p>
    </div>
  );
};

export default CompanyPage;

getServerSideProps应用场景

个性化内容页面：比如用户个人资料页面，每个用户看到的内容不同，需要在每次请求时从服务器获取特定用户的数据。
实时数据页面：如股票行情页面，数据实时变化，每次请求都要获取最新数据。

示例：用户个人订单页面，不同用户订单不同。

export async function getServerSideProps(context) {
  const { req } = context;
  const token = req.cookies.token;
  const res = await fetch('https://api.example.com/orders', {
    headers: {
      Authorization: `Bearer ${token}`
    }
  });
  const data = await res.json();
  return {
    props: {
      orders: data
    }
  }
}

const UserOrdersPage = ({ orders }) => {
  return (
    <div>
      <h1>Your Orders</h1>
      {orders.map(order => (
        <div key={order.id}>
          <p>{order.product}</p>
          <p>{order.price}</p>
        </div>
      ))}
    </div>
  );
};

export default UserOrdersPage;

面试题：Next.js中数据获取策略之getStaticProps和getServerSideProps的应用场景

知识考点

面试题答案

getStaticProps应用场景

getServerSideProps应用场景