next.js 13 不提供全局禁用服务端渲染（ssr）的配置选项；其核心设计哲学是默认兼顾服务端与客户端能力，若仅需纯 csr，推荐选用更轻量的框架（如 create react app）。
next.js 13 不提供全局禁用服务端渲染（ssr）的配置选项；其核心设计哲学是默认兼顾服务端与客户端能力，若仅需纯 csr，推荐选用更轻量的框架（如 create react app）。
Next.js 自诞生起便以“混合渲染”为基石——它不强制全栈，但也不鼓励放弃服务端优势。因此，Next.js 13 并未提供类似 ssr: false 的顶层配置来启用“纯客户端渲染模式”。这不是功能遗漏，而是架构取舍：Next.js 的价值恰恰体现在自动代码分割、服务端数据获取（generateStaticParams、fetch in Server Components）、流式渲染、SEO 友好及边缘运行等 SSR/SSG/ISR 能力上。若项目明确拒绝所有服务端逻辑（包括初始 HTML 渲染、服务端数据预取、服务端组件），那么 Next.js 已超出其适用场景。
✅ 正确做法：按需启用客户端行为
当组件需要使用 React State、Effects、Refs 或浏览器专属 API（如 window、localStorage）时，应显式标记为客户端组件：
// app/page.tsx —— 这是一个 Server Component（默认）
export default function HomePage() {
return <div>Welcome! (Rendered on server)</div>;
}// app/client-component.tsx —— 显式声明为 Client Component
'use client';
import { useState, useEffect } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Mounted on client only');
}, []);
return (
<button onClick={() => setCount(c => c + 1)}>
Count: {count}
</button>
);
}⚠️ 注意事项：
-
use client必须作为文件首行纯文本指令（前面不能有空行或注释），否则将被忽略； - Client Components 只能在 Client Components 中导入（Server Components 中不可直接 import）；
- 页面根组件（如 app/page.tsx）默认是 Server Component，但可嵌套任意数量的 Client Components；
- 即使整个页面由 Client Components 构成，Next.js 仍会生成服务端渲染的 HTML 骨架（hydration 前可见），这是 CSR 应用无法绕开的基础保障，也是性能与体验的平衡点。
? 总结：
不要试图“关闭 SSR”来让 Next.js 变成 React Router SPA；而应理解其分层渲染模型——Server Components 处理数据与结构，Client Components 处理交互与状态。若业务确实 100% 无需服务端参与（无 SEO、无首屏性能要求、无服务端数据依赖），请直接选用 Create React App、Vite + React 或 Remix（client-only mode）等更契合的工具链。拥抱 Next.js 的前提，是信任它的服务端能力——而非规避它。
