服务器端渲染（SSR）指HTML在服务器生成后发送至浏览器，解决SPA首屏白屏与SEO问题；Next.js默认支持SSR，通过getServerSideProps实现每次请求服务端数据获取并注入页面，适合需实时数据的场景。
服务器端渲染（SSR）是指页面的 HTML 在服务器上生成，再发送给浏览器，而不是等 JavaScript 加载后再由前端拼出内容。Next.js 是一个基于 React 的框架，它默认支持 SSR，让页面首屏更快、对 SEO 更友好，也更容易做服务端数据获取。
服务器端渲染的核心作用
SSR 解决的是传统单页应用（SPA）的两个痛点：首屏白屏时间长、搜索引擎抓不到动态内容。服务器提前把带数据的 HTML 渲染好，浏览器一收到就能显示，用户感知更流畅，爬虫也能直接读取完整页面结构。
Next.js 把 SSR 做成了“开箱即用”——你不用手动搭 Express 服务、写 renderToString，只要按约定写页面文件，框架自动处理服务端渲染逻辑。
Next.js 中实现 SSR 的常用方式
在 pages 目录下创建 .js 文件，Next.js 就把它当成一个路由页面。要让这个页面走服务端渲染，关键是在组件导出前加上 getServerSideProps 函数：
- 这个函数在每次请求时都会在服务端执行，返回的数据会作为 props 传给页面组件
- 适合需要实时数据的场景，比如用户个人中心、带权限的订单页
- 函数里可以调用数据库、API、读取 cookies，但不能访问浏览器专属对象（如 window）
示例：
export async function getServerSideProps() {const res = await fetch('https://api.example.com/user');
const user = await res.json();
return { props: { user } };
}
export default function Profile({ user }) {
return Hello, {user.name}!;
}
静态生成（SSG
）和 SSR 的区别
）和 SSR 的区别Next.js 还支持 getStaticProps，它在构建时就生成 HTML，适合内容不常变的页面（如博客列表、产品介绍）。而 getServerSideProps 是每次请求都跑一遍，适合个性化、实时性要求高的内容。
选哪个？看数据是否随请求变化：
- 用户登录态、实时价格、未读消息 → 用 getServerSideProps
- 文章详情、公司介绍、帮助文档 → 用 getStaticProps + 可选的增量静态再生（ISR）
简单起步：三步跑起一个 SSR 页面
- 用 npx create-next-app@latest 创建项目
- 在 pages/index.js 中添加 getServerSideProps 并返回数据
- 运行 npm run dev，打开 http://localhost:3000，查看源代码确认 HTML 已含服务端渲染内容
基本上就这些。不需要额外配置 Webpack 或 Babel，Next.js 内置了所有 SSR 所需的能力，专注写业务就行。
