Next.js中getServerSideProps的context是什么？有替代方案吗？

一、getServerSideProps中的context是什么？ #

context是Next.js在执行getServerSideProps时传入的服务器端上下文对象，它封装了当前请求的所有关键运行时信息，让你能在服务器端获取请求、路由、本地化等数据，进而决定页面要传递的props。

二、context具体包含哪些核心内容？ #

• req: Node.js原生HTTP请求对象，可获取请求头、Cookie、请求体等信息
• res: Node.js原生HTTP响应对象，可用于设置响应头、Cookie或直接发送响应
• params: 动态路由参数，比如/users/[id]页面中，params会返回{ id: 'xxx' }
• query: URL中的查询参数，比如/user?name=test对应的{ name: 'test' }
• preview: 布尔值，标识当前是否处于预览模式
• previewData: 预览模式下传递的自定义数据
• resolvedUrl: 当前页面的完整解析URL（包含查询参数）
• locale: 当前页面的语言区域（若开启了国际化功能）
• locales: 应用支持的所有语言区域列表
• defaultLocale: 应用设置的默认语言区域

三、getServerSideProps的替代方案（Next.js 13+ App Router） #

Next.js 13推出的App Router已成为主流，替代了Pages Router中的getServerSideProps，推荐以下几种方式：

1. 服务器组件直接异步获取数据 #

App Router中默认组件都是服务器组件，可直接在组件内部编写异步代码，无需额外的 데이터 获取函数，逻辑会在服务器端执行：

import { getSession } from "next-auth/react";

async function UserPage() {
  const session = await getSession();
  console.log("sess", session);
  return <div>User</div>;
}

export default UserPage;

2. Route Handlers（独立处理服务器端逻辑） #

如果需要将数据逻辑和页面组件分离，可以在app目录下创建route.js文件编写API逻辑，页面组件通过fetch调用：
比如创建app/api/session/route.js：

import { getSession } from "next-auth/react";
import { NextResponse } from "next/server";

export async function GET(request) {
  const session = await getSession({ req: request });
  return NextResponse.json(session);
}

然后在UserPage中调用：

async function UserPage() {
  const res = await fetch("/api/session");
  const session = await res.json();
  console.log("sess", session);
  return <div>User</div>;
}

export default UserPage;

3. generateStaticParams（静态生成动态路由） #

如果页面内容可以预先静态生成，但需要适配动态路由参数，可使用generateStaticParams，不过它是静态生成逻辑，仅在构建时或增量静态再生时执行，和getServerSideProps的每次请求运行不同。

四、原代码的适配说明 #

你提供的导师代码是Pages Router的写法，在App Router中可以直接去掉getServerSideProps，改用服务器组件异步获取session，实现完全一致的服务器端数据获取逻辑。

内容的提问来源于stack exchange，提问作者Raghunadh Hital