面试题：Next.js 自定义 App 组件中针对 SSR 场景的高效全局状态管理优化

可能导致性能问题的原因

数据冗余：全局状态管理中可能存在大量重复或不必要的数据，在每次 SSR 渲染时都传输和处理这些数据，增加了加载时间。
过度渲染：当购物车状态变化时，可能会触发不必要的组件重新渲染，导致性能下降。
初始数据加载量大：在 SSR 时，需要获取大量购物车初始数据，若数据获取逻辑复杂或数据量过大，会延迟页面渲染。

优化全局状态管理以提升 SSR 性能的策略

使用 Memoization（记忆化）
- 代码实现关键要点：
  - 在获取购物车数据的函数中，使用 React.memo 对组件进行包裹，避免不必要的渲染。例如，如果有一个显示购物车商品列表的组件 CartItemsList，可以这样处理：

const CartItemsList = React.memo(({ cartItems }) => {
  // 组件渲染逻辑
  return (
    <ul>
      {cartItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
});

    - 对于计算属性，使用 `useMemo` 进行记忆化。比如计算购物车总价：

const CartTotal = ({ cartItems }) => {
  const total = useMemo(() => {
    return cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
  }, [cartItems]);
  return <p>Total: ${total}</p>;
};

- **对项目架构的影响**：这种策略有助于减少不必要的渲染，提高组件渲染效率。项目架构方面，需要在组件层面更加关注数据的依赖关系，确保 `React.memo` 和 `useMemo` 的依赖数组设置正确，避免错误的优化。同时，可能需要对现有组件进行一定的改造，增加记忆化处理。

2. 数据分片与按需加载 - 代码实现关键要点： - 将购物车数据按功能或模块进行分片。例如，分为商品列表数据、用户信息数据、优惠券数据等。 - 在 SSR 时，根据页面初始渲染需求，只加载必要的数据分片。比如，在首页可能只需要显示购物车商品数量，那么只加载商品列表数据中的数量部分。可以通过 API 接口来实现按需获取数据，例如：

// 在 getStaticProps 或 getServerSideProps 中
export async function getServerSideProps(context) {
  const cartQuantityRes = await fetch('/api/cart/quantity');
  const cartQuantity = await cartQuantityRes.json();
  return {
    props: {
      cartQuantity
    }
  };
}

- **对项目架构的影响**：这种策略改变了数据获取和管理的方式，需要重新设计 API 接口，使其支持数据分片获取。同时，项目的状态管理结构需要更加清晰，明确各数据分片的职责和使用场景。可能需要增加一些数据管理逻辑来协调不同数据分片之间的关系。

星途面试题库

面试题：Next.js 自定义 App 组件中针对 SSR 场景的高效全局状态管理优化

知识考点

面试题答案

可能导致性能问题的原因

优化全局状态管理以提升 SSR 性能的策略