面试题：Next.js 中 getServerSideProps 的数据获取时机及应用场景

Question

请阐述在 Next.js 里 getServerSideProps 函数的数据获取是在什么时候进行的？并举例说明至少两个适合使用 getServerSideProps 的实际应用场景。

Answer 1

getServerSideProps 函数的数据获取时间

在 Next.js 中，getServerSideProps 函数的数据获取是在每次请求页面时，在服务器端执行。这意味着每次用户请求该页面（无论是直接访问还是通过链接导航），都会触发 getServerSideProps 函数在服务器端运行以获取数据，然后将数据与页面组件一起渲染，再将完整的 HTML 发送到客户端。

适合使用 getServerSideProps 的实际应用场景

1. 个性化内容展示：比如用户登录后，需要根据用户的角色（如管理员、普通用户）展示不同的页面内容。例如一个新闻网站，管理员登录后能看到所有新闻的详细信息以及编辑、删除按钮，而普通用户只能看到新闻列表和正文。

export async function getServerSideProps(context) {
  const { req } = context;
  const user = getUserFromRequest(req); // 假设此函数从请求中获取用户信息
  let news;
  if (user.role === 'admin') {
    news = await getAllNewsWithDetails();
  } else {
    news = await getPublicNews();
  }
  return {
    props: {
      news
    }
  };
}

const NewsPage = ({ news }) => {
  return (
    <div>
      {news.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
};

export default NewsPage;

2. 实时数据展示：例如一个显示股票价格的页面，股票价格是实时变动的。每次用户请求页面时，都需要从外部 API 获取最新的股票价格数据。

export async function getServerSideProps() {
  const response = await fetch('https://api.example.com/stock-price');
  const data = await response.json();
  return {
    props: {
      stockPrice: data.price
    }
  };
}

const StockPage = ({ stockPrice }) => {
  return (
    <div>
      <p>当前股票价格: {stockPrice}</p>
    </div>
  );
};

export default StockPage;