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 ;
}
访问该页面时，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。
