在Next.js 13+的App Router中，所有路由的page.js应设为服务器组件吗？

1. page.js 默认是服务器组件的原因 #

在Next.js 13+的App Router体系里，所有路由文件夹下的page.js默认都是服务器组件，这是框架的原生设计规则。这么做的核心目的是优先服务于性能优化：服务器组件不会被打包到客户端JS bundle中，能直接在服务端完成渲染、数据获取，既提升页面加载速度，又强化SEO表现，还能安全访问服务端专属资源（如服务器环境变量）。

2. 是否必须都用服务器组件？标准实践是什么？ #

不是强制要求，但优先使用服务器组件是官方推荐的标准实践。

服务器组件适配绝大多数场景：比如需要直接获取数据（无需额外配置就能在组件内写fetch）、渲染静态内容、依赖服务端逻辑的页面。只有当你需要用到客户端专属能力时，才需要考虑转为客户端组件——比如使用useState/useEffect等React Hooks、调用浏览器API（如window/document）、集成表单交互或动画库这类客户端依赖。

3. 使用'use client'转为客户端组件的合理性与注意事项 #

用'use client'标记page.js完全符合最佳实践，只要你确实有客户端交互的需求，框架会正常处理，构建过程不会出现问题。

但要避免盲目使用：

• 一旦标记为客户端组件，整个组件及其导入的子组件都会被打包到客户端bundle，会增加客户端JS体积，拖慢加载速度。
• 客户端组件无法直接访问服务端专属资源（如服务器环境变量），也不能在组件顶层写服务端专属逻辑（比如读取本地文件）。
• 如果只是页面局部需要交互，建议只给对应子组件加'use client'，而非整个page.js——这样能最大化保留服务器组件的性能优势。

4. 构建时的处理逻辑 #

构建阶段，框架会自动识别page.js的标记：

• 无'use client'标记时，作为服务器组件处理：静态生成场景下会在构建时预渲染为HTML；SSR场景下则在用户请求时在服务端渲染，最终只把静态HTML发送给客户端，无需加载该组件的JS。
• 带有'use client'标记时，会被打包进客户端bundle，用户加载页面时会下载并执行这部分JS，负责交互逻辑。

另外，服务器组件和客户端组件可以自由嵌套——服务器组件作为父容器嵌入客户端组件，这是常见的优化方案，框架完全支持。

内容的提问来源于stack exchange，提问作者Abhith Shaji