Next.js 中何时使用 getServerSideProps？

推荐答案

在 Next.js 中，getServerSideProps 主要用于以下场景：

1. 需要根据每个请求动态生成页面内容：当页面内容依赖于请求时的数据（如用户身份、查询参数等），并且这些数据需要在服务器端获取时，使用 getServerSideProps。
2. 需要 SEO 优化的动态内容：如果页面内容需要被搜索引擎索引，并且内容是基于请求时动态生成的，使用 getServerSideProps 可以确保每次请求时都能生成最新的内容。
3. 需要访问服务器端资源：当页面需要访问服务器端资源（如数据库、API 等）来获取数据时，使用 getServerSideProps 可以在服务器端完成数据获取，避免客户端暴露敏感信息。

本题详细解读

1. 动态生成页面内容

getServerSideProps 允许你在每次请求时动态生成页面内容。这意味着你可以根据请求的上下文（如查询参数、用户身份等）来获取数据并渲染页面。例如，一个电商网站的产品详情页可能需要根据产品 ID 从数据库中获取产品信息，并在服务器端渲染页面。

// www.javascriptcn.com code example
export async function getServerSideProps(context) {
  const { id } = context.query;
  const res = await fetch(`https://api.example.com/products/${id}`);
  const product = await res.json();

  return {
    props: {
      product,
    },
  };
}

2. SEO 优化的动态内容

对于需要 SEO 优化的页面，getServerSideProps 可以确保每次请求时都能生成最新的内容。这对于搜索引擎爬虫来说非常重要，因为它们需要获取最新的页面内容来进行索引。例如，新闻网站的文章页面可能需要根据文章 ID 从数据库中获取最新的文章内容。

// www.javascriptcn.com code example
export async function getServerSideProps(context) {
  const { slug } = context.params;
  const res = await fetch(`https://api.example.com/news/${slug}`);
  const article = await res.json();

  return {
    props: {
      article,
    },
  };
}

3. 访问服务器端资源

getServerSideProps 还可以用于访问服务器端资源，如数据库或 API。由于这些操作在服务器端完成，因此可以避免在客户端暴露敏感信息。例如，一个用户仪表盘页面可能需要从数据库中获取用户的个人信息。

// www.javascriptcn.com code example
export async function getServerSideProps(context) {
  const { userId } = context.query;
  const res = await fetch(`https://api.example.com/users/${userId}`);
  const user = await res.json();

  return {
    props: {
      user,
    },
  };
}

总结

getServerSideProps 是 Next.js 中一个强大的功能，适用于需要在每次请求时动态生成页面内容、优化 SEO 或访问服务器端资源的场景。通过使用 getServerSideProps，你可以确保页面内容始终是最新的，并且可以在服务器端完成敏感操作，避免客户端暴露敏感信息。