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 (
    
      
博客列表
      {posts.map(post => (
        
{post.title}
      ))}
    
  );
}

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 返回给浏览器。

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