1.Framer Motion 中 motion/react 和 motion/react-client 的用法和区别

背景知识：服务器端渲染 (SSR) 和客户端渲染 (CSR)

在最新的 Motion for React（原 Framer Motion）12.x 及更高版本中，官方提供了两个入口模块：motion/react 和 motion/react-client。二者对外 API 完全一致，但针对的运行环境不同，分别适合“客户端组件”（Client Components）和“服务器组件”（Server Components）场景。选择时，只需根据组件类型（是否带 "use client"）导入对应模块：在需要在浏览器端执行动画的组件中使用 motion/react；在 React Server Components 中使用 motion/react-client，以避免在服务端构建时引入浏览器特有的代码。

---

🎯 React 渲染模式回顾

1. 客户端渲染（CSR）

客户端渲染（CSR）指浏览器先加载一个基础 HTML，再由 React 在客户端运行 JavaScript 并动态挂载组件 UI

2. 服务器端渲染（SSR）

服务器端渲染（SSR）先在服务端将组件渲染为 HTML 字符串发送给浏览器，随后通过 React 的“hydrate”过程接管页面，以实现交互能力。

3. React Server Components（RSC）

React 19 引入的 Server Components 允许组件完全在服务器上运行并输出标记，客户端仅接收静态内容，无需再发送对应的 JavaScript 进行“hydrate”。

---

1. motion/react

• 用途: 这是 Motion 库的主要模块，用于在 React 客户端组件 中创建动画。
• 功能: 提供完整的 Motion 动画功能，包括 <motion> 组件、动画属性（如 animate、whileHover、whileInView 等）、手势支持、变体（variants）、退出动画（通过 AnimatePresence）等。此模式支持完整的动画和交互功能（如手势、动态属性变化等），适用于需要客户端交互的组件‌
• 使用场景: 适用于传统的 React 客户端渲染场景，组件运行在浏览器端，依赖 React 的客户端生命周期和交互性。
• 导入方式:

  import { motion } from "motion/react";
  

• 示例:

  import { motion } from "motion/react";function Component() {return (<motion.divanimate={{ scale: 1.2 }}whileHover={{ scale: 1.5 }}transition={{ duration: 0.5 }}>Hello, Motion!</motion.div>);
  }
  

• 注意事项:
  • 仅适用于客户端组件，不能直接在 React 服务器组件中使用。
  • 需要确保组件在客户端渲染环境中运行，通常在 Next.js 中需要添加 "use client" 指令。

---

2. motion/react-client

• 用途: 专为 React 服务器组件（React Server Components, RSC）设计，提供在服务器端渲染场景下使用 Motion 动画的支持。依赖客户端计算 服务端生成静态动画,该模式仅支持预定义的静态动画效果，适用于服务端渲染的无交互场景。
• 功能: 与 motion/react 类似，但针对服务器组件进行了优化。允许在服务器端渲染的上下文中使用 Motion 的动画功能，同时确保动画逻辑在客户端正确执行。
• 使用场景: 适用于 Next.js 等支持服务器组件的框架，特别是在使用 App Router 的项目中，结合服务器端渲染（SSR）或静态生成（SSG）时需要动画。适用组件‌ 按钮、可拖拽元素等 页面骨架、静态内容区块
• 导入方式:

  import * as motion from "motion/react-client";
  

• 示例:

      // 服务器组件（无需 "use client"）import * as motion from "motion/react-client"; export function ServerBox() return (<motion.divinitial={{ opacity: 0 }}animate={{ opacity: 1 }}transition={{ duration: 0.5 }}>服务端组件静态动画</motion.div>);}}```
  

• 注意事项:
  • 由于 React 服务器组件无法直接处理客户端交互（如手势或动态事件），motion/react-client 通常需要在客户端组件中结合使用（通过 "use client"）。
  • 服务器组件中只负责静态渲染部分，动画逻辑会在客户端接管。
  • 确保正确配置 "use client"，否则可能会遇到错误（如 createContext 相关的错误）。

---

📌 选型指南

1. Client Components（带 "use client" 的文件）
   • 推荐： motion/react，提供完整的浏览器动画能力及 SSR 水合兼容 。
2. Server Components（React Server Components）
   • 必须： motion/react-client，避免引入浏览器特有模块，确保在服务端构建时不出错 。
3. 纯 CSR 项目（Create React App、Vite 等）
   • 可选： motion/react-client，享轻量化包体；亦可使用 motion/react 以保证未来兼容 。

---

🔚 结语

通过上述梳理，您可以根据组件类型和渲染环境，在项目中无缝切换 motion/react 与 motion/react-client，既保证动画体验，又实现包体与构建的最优配置。