默认情况下， app 文件夹下的所有组件都是 Server Side 组件

特别是主页，SSR 可以提高初次加载速度，且利好 SEO

使用 CSR

Next 支持自定义不同组件的 SSR 和 CSR，只需要在组件第一行写入 “use client” 注释即可

// xxx.tsx
"use client"

注意：在需要使用到 react 的 hooks 时，要记得添加 use client

使用时机

SSR：

1. Fetch 数据
2. 直接访问后端
3. 处理敏感数据（access tokens、API keys …）
4. 将大型依赖放置在服务器处理来减少客户端 JS 大小

CSR：

1. 使用事件监听
2. 使用 hooks
3. 使用 browser-only API
4. 使用依赖于 2 和 3 的自定义 hooks
5. 使用 React 类组件

Rendering: Composition Patterns

SSR 和 CSR 混合优化