Next.js 通过 getServerSideProps 实现 SSR：该函数在每次请求时于服务端执行，获取数据后注入页面组件并返回完整 HTML。仅限页面组件使用，支持服务端能力但禁用浏览器 API，保障数据安全与 SEO。
Next.js 是一个基于 React 的轻量级框架，专为构建服务端渲染（SSR）、静态站点生成（SSG）和混合渲染应用而设计。它开箱即用地支持文件系统路由、API 路由、自动代码分割、热更新和优化的构建流程，让 SSR 不再需要手动配置 Webpack、Babel 或 Express 服务。
Next.js 如何实现 SSR？
Next.js 在页面组件中提供 getServerSideProps 函数，该函数在每次请求时于服务端运行，获取数据后将结果与页面组件一起序列化并发送到客户端，从而完成真正的服务端渲染。
- 只在页面级别（
pages/或app/中的路由组件）中有效，不能在普通组件内使用 - 返回的对象会作为 props 注入页面组件，且不会出现在客户端 bundle 中（保障服务端数据不泄露）
- 函数内部可调用数据库、外部 API、读取文件等服务端能力，但不可使用浏览器专属 API（如
window、document）
用 Next.js 快速搭建 SSR 页面
以 pages/index.js 为例：
export default function Home({ posts }) {
return (
<div>
<h1>博客列表</h1>
{posts.map(post => (
<article key={post.id}><h2>{post.title}</h2></article>
))}
</div>
);
}
export async function getServerSideProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3');
const posts = await res.json();
return { props: { posts } };
}
运行 next dev 后，每次访问首页都会触发服务端请求，拿到最新数据再渲染 HTML 返回给浏览器。
立即学习“Java免费学习笔记（深入）”；
SSR 与 SSG、CSR 的关键区别
理解三者有助于合理选型：
- SSR：每次请求都执行服务端逻辑，适合内容实时性高、SEO 敏感且用户个性化强的场景（如用户仪表盘、新闻首页）
-
SSG：构建时预生成 HTML，部署后无需服务端计算，适合内容变化少、加载速度优先的页面（如文档、营销页），通过
getStaticProps实现 - CSR：纯前端渲染，初始 HTML 空白，靠 JS 获取数据并挂载，适合后台类应用或对 SEO 无要求的交互界面
注意事项与常见问题
SSR 并非万能，需注意以下几点：
- 服务端环境没有 cookie、localStorage 等客户端存储，需用
req.headers.cookie手动解析身份信息 - 避免在
getServerSideProps中做耗时操作，否则拖慢首屏时间；必要时加缓存或降级策略 - 若升级到 App Router（
app/目录），SSR 默认启用，可通过generateStaticParams和dynamic = "force-dynamic"控制行为 - 部署时需 Node.js 环境（Vercel、Node 服务器、Docker 容器等），静态托管平台（如 GitHub Pages）不支持原生 SSR
