`getServerSideProps` 是 Next.js 提供的一个函数，用于在服务端执行数据获取逻辑，并将数据注入到页面的 props 中。这意味着每次用户访问该页面时，Next.js 都会在服务端运行 `getServerSideProps`，并在页面呈现之前将数据发送到客户端。这与客户端渲染（CSR）不同，因为页面在发送给浏览器时，已经包含了所有必要的数据，而不是在客户端加载后再通过 JavaScript 获取数据。 ##### 使用场景 1. 页面内容依赖动态数据，如用户的个性化内容、实时更新的数据。 2. 每次页面请求都需要从外部 API 或数据库获取最新的数据。 3. SEO 需求较高的页面，确保搜索引擎爬虫能够抓取预渲染的完整页面。 ##### 示例：获取并显示用户数据下面我们用一个简单的例子，展示如何使用 `getServerSideProps` 获取外部 API 的数据，并在页面中显示。 ###### 1. 创建一个新页面在 `pages/` 目录下创建一个文件，例如 `pages/user.js`： ```jsx // pages/user.js export default function UserPage({ user }) { return (

User Information

Name: {user.name}

Email: {user.email}

); } // 使用 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: Sincere@april.biz ``` 每次用户访问该页面时，都会发送新的请求到服务端以获取最新的数据。这确保页面总是展示最新的数据，同时利用了 Next.js 提供的服务端渲染 (SSR) 能力。 ##### 如何调试 `getServerSideProps` 1. 在 `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, }, }; } ``` 2. 注意 `getServerSideProps` 函数只能在页面组件中使用，不能在普通组件或 `API Routes` 中使用。 ##### 性能与优化由于 `getServerSideProps` 会在每次请求时执行，使用不当可能会影响性能。如果你的数据不需要频繁更新，可以考虑以下优化方案： * **静态生成 (`getStaticProps`)**：对于不频繁变动的数据，静态生成可能更合适，因为它只在构建时获取数据，之后不再发起请求。 * **增量静态生成 (ISR)** ：可以使用 `getStaticProps` 配合 `revalidate` 来设定静态页面的刷新间隔，以减轻服务器压力。