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

news2025/4/20 2:27:05

背景知识：服务器端渲染 (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.div
      animate={{ 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.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5 }}
      >
        服务端组件静态动画
      </motion.div>
    );
  }
    }
    ```

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

📌 选型指南

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