你有没有遇到过这种情况：打开一个网页，先是一片白屏，然后内容才慢慢出来？而有些网站一打开就能看到内容？这就是 CSR 和 SSR 的区别。

CSR（Client-Side Rendering，客户端渲染）：浏览器先下载一个空壳 HTML + 一大段 JavaScript，然后由 JS 在浏览器里动态生成页面内容。优点是交互流畅，缺点是首屏慢、搜索引擎看不到内容。SSR（Server-Side Rendering，服务端渲染）：服务器先把页面内容拼好，直接返回完整的 HTML。用户打开就能看到内容，对搜索引擎也友好。Next.js 的核心能力之一就是支持 SSR。

SSR vs CSR 加载对比

Next.js 中看到 'use client' 标记的组件，意味着这个组件会：

• 在服务器上运行
• 在浏览器中运行（客户端渲染）
• 在数据库中存储
• 不会被渲染

在 Next.js 中，默认所有组件都是服务端组件（Server Component）。只有需要用户交互（点击、输入、状态变化）的组件，才加上 'use client' 变成客户端组件。

组件类型选择器

Next.js 渲染策略总结：Server Component（默认）= 服务端渲染，适合展示内容、读取数据，不能用 useState/onClick；Client Component（'use client'）= 客户端渲染，适合交互组件，可以用 React hooks。好的做法是：大部分组件用 Server，只在需要交互的组件上加 'use client'。

你不需要每次都纠结用 SSR 还是 CSR——Next.js 已经帮你做了最优选择。你只需要记住：纯展示的组件默认就好，需要交互的加上 'use client'。