什么是SSR与CSR

网页是怎么"画"出来的？

你每天看到的网页，都需要经过一个"渲染"过程——把代码变成你看到的页面。这个渲染过程可以发生在两个地方：服务器（SSR）或浏览器（CSR）。

加载图表中...

CSR：浏览器来画页面

CSR（Client-Side Rendering，客户端渲染） 的流程：

浏览器请求页面
服务器返回一个几乎为空的 HTML + 一大段 JavaScript
浏览器下载并执行 JS
JS 发起 API 请求获取数据
JS 动态生成页面内容

加载图表中...

CSR 的特点：

❌ 首屏白屏时间长（需要下载 + 执行 JS + 请求数据）
❌ 搜索引擎看到的是空页面（不利于 SEO）
✅ 后续页面切换非常快（不用重新加载）
✅ 交互体验流畅（像 App 一样）

SSR：服务器来画页面

SSR（Server-Side Rendering，服务端渲染） 的流程：

浏览器请求页面
服务器在自己这边渲染好完整的 HTML
直接返回包含内容的完整页面
浏览器收到就能立即显示
JS 随后加载，激活交互功能

加载图表中...

SSR 的特点：

✅ 首屏速度快（服务器直接返回完整内容）
✅ 搜索引擎能看到完整内容（有利于 SEO）
❌ 服务器压力较大（每次请求都要渲染）
❌ 页面切换可能会有短暂刷新

对比总结

对比项	CSR 客户端渲染	SSR 服务端渲染
首屏速度	慢（白屏等 JS）	快（直接看到内容）
SEO	差（搜索引擎看到空页面）	好（完整 HTML）
交互体验	流畅（像 App）	一般（可能有跳转）
服务器压力	小（渲染在浏览器）	大（每次都要渲染）
适用场景	后台管理系统、SPA 应用	博客、电商、营销页面

Next.js：两全其美的方案

Next.js 的设计理念是：默认用 SSR，需要交互时用 CSR。

Server Component（服务端组件）

// 默认就是服务端组件，不需要特别标注
// 可以直接读取数据库、调用 API
async function ProductList() {
  const products = await db.product.findMany()
  return (
    <div>
      {products.map(p => <div key={p.id}>{p.name}</div>)}
    </div>
  )
}

适合：纯展示内容、读取数据库、调用 API

Client Component（客户端组件）

'use client'  // ← 加上这一行，变成客户端组件

import { useState } from 'react'

function LikeButton() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      ❤️ {count}
    </button>
  )
}

适合：需要用户交互（点击、输入）、使用 React hooks（useState、useEffect）

如何判断用哪个？

场景	用什么	原因
博客文章页面	Server Component	纯展示，不需要交互
点赞/收藏按钮	Client Component	需要响应点击、更新状态
产品列表	Server Component	从数据库读取数据展示
搜索框	Client Component	需要监听输入、实时过滤
导航栏下拉菜单	Client Component	需要状态控制展开/收起
页脚版权信息	Server Component	纯静态文本

💡 简单记忆：需要 useState、onClick、onChange 的组件 → 加 'use client'。其他的默认就好。

🎯 AI编程小贴士：当 AI 生成的代码报错 useState is not defined 或 onClick handler cannot be passed to Server Component 时，通常是忘了在文件顶部加 'use client'。

小结

CSR（客户端渲染）：浏览器用 JS 画页面，首屏慢但交互流畅
SSR（服务端渲染）：服务器画好页面直接返回，首屏快且 SEO 友好
Next.js 默认使用 SSR，需要交互时加 'use client' 切换为 CSR
判断标准：需要用户交互 → Client，纯展示 → Server
不用过度纠结，Next.js 已经帮你做了大部分优化