Next.js通过getServerSideProps函数实现服务端渲染，每次请求时在服务端获取数据并注入页面props，生成完整HTML返回；页面需默认导出函数组件，且不可使用客户端API。

服务端渲染（SSR）在 JavaScript 中指的是页面的 HTML 内容由服务器在响应请求时动态生成并返回，而不是等浏览器加载完 JS 后再由客户端拼出页面。这对首屏加载速度、SEO 和部分网络环境下的用户体验很关键。

Next.js 是怎么做到服务端渲染的？

Next.js 默认支持 SSR，但不是所有页面都自动启用——它通过特定的导出方式来触发服务端逻辑。

• 使用 getServerSideProps：这是 Next.js 提供的专属函数，每次请求都会在服务端运行，获取数据后把结果注入页面的 props，然后生成完整的 HTML 返回给浏览器。
• 页面组件必须是默认导出的函数组件：Next.js 才能识别并配合 getServerSideProps 进行渲染流程。
• 不依赖客户端状态：因为代码运行在 Node.js 环境中，不能访问 window、document 或 localStorage，否则会报错。

一个简单的 SSR 页面示例

比如你写一个 pages/user.js：

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/user');
  const user = await res.json();
  return { props: { user } };
}

export default function UserPage({ user }) {
  return 
{user.name}
{user.email}
;
}

访问该页面时，Next.js 会在服务端调用 getServerSideProps，拿到用户数据，把 UserPage 渲染成带真实内容的 HTML 发送给浏览器，用户看到的就是“开箱即用”的完整页面。

SSR 和静态生成（SSG）、客户端渲染（CSR）的区别

• SSR 每次请求都重新生成 HTML，适合内容频繁变化、需个性化（如登录态、地区信息）的页面。
• SSG（getStaticProps）在构建时生成 HTML，更快更轻量，但不适合实时数据。
• CSR 完全由浏览器执行，初始 HTML 是空壳，靠 JS 补全内容，对 SEO 和弱网用户不太友好。

需要注意的实际细节

• 不能在 getServerSideProps 里写 React Hook，它只是普通异步函数，不在组件生命周期内运行。
• 重定向和返回状态码也支持：可以返回 { redirect: { destination: '/login', permanent: false } } 或 { notFound: true }。
• 开发时热更新仍有效：修改 getServerSideProps 后保存，Next.js 会自动重启服务端逻辑，无需手动重启 dev server。