Next.js getServerSideProps

getServerSideProps 是 Next.js 提供的一个函数，用于在服务端执行数据获取逻辑，并将数据注入到页面的 props 中。这意味着每次用户访问该页面时，Next.js 都会在服务端运行 getServerSideProps，并在页面呈现之前将数据发送到客户端。

这与客户端渲染（CSR）不同，因为页面在发送给浏览器时，已经包含了所有必要的数据，而不是在客户端加载后再通过 JavaScript 获取数据。

使用场景

页面内容依赖动态数据，如用户的个性化内容、实时更新的数据。
每次页面请求都需要从外部 API 或数据库获取最新的数据。
SEO 需求较高的页面，确保搜索引擎爬虫能够抓取预渲染的完整页面。

示例：获取并显示用户数据

下面我们用一个简单的例子，展示如何使用 getServerSideProps 获取外部 API 的数据，并在页面中显示。

1. 创建一个新页面

在 pages/ 目录下创建一个文件，例如 pages/user.js：

jsx 复制代码

// pages/user.js

export default function UserPage({ user }) {
  return (
    <div>
      <h1>User Information</h1>
      <p><strong>Name:</strong> {user.name}</p>
      <p><strong>Email:</strong> {user.email}</p>
    </div>
  );
}

// 使用 getServerSideProps 来获取数据
export async function getServerSideProps() {
  // 从外部 API 获取用户数据
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await res.json();

  // 将获取的数据传递给页面
  return {
    props: {
      user,
    },
  };
}

2. 代码解析

getServerSideProps 函数在服务端运行，每次页面请求时都会被执行。
fetch 用于获取外部 API（在这个例子中是一个虚拟的用户数据 API）。
通过 return { props: { user } }，我们将获取到的数据作为 props 传递给页面组件 UserPage。
在页面组件 UserPage 中，我们通过 props 接收 user 数据并在页面上显示。

3. 运行效果

当用户访问 /user 页面时，getServerSideProps 会在服务端执行 fetch 请求，并将用户数据注入到页面。页面在加载时会显示如下内容：

makefile 复制代码

User Information
Name: Leanne Graham
Email: [email protected]

每次用户访问该页面时，都会发送新的请求到服务端以获取最新的数据。这确保页面总是展示最新的数据，同时利用了 Next.js 提供的服务端渲染 (SSR) 能力。

如何调试 `getServerSideProps`

在 getServerSideProps 中可以使用 console.log 来查看服务器端的日志，方便调试。例如：

js 复制代码

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await res.json();

  console.log('Fetched user:', user); // 服务器端输出

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

注意 getServerSideProps 函数只能在页面组件中使用，不能在普通组件或 API Routes 中使用。

性能与优化

由于 getServerSideProps 会在每次请求时执行，使用不当可能会影响性能。如果你的数据不需要频繁更新，可以考虑以下优化方案：

静态生成 (getStaticProps)：对于不频繁变动的数据，静态生成可能更合适，因为它只在构建时获取数据，之后不再发起请求。
增量静态生成 (ISR) ：可以使用 getStaticProps 配合 revalidate 来设定静态页面的刷新间隔，以减轻服务器压力。