如何将Page Router中的getInitialProps迁移至App Router？

一、你的Layout方案是可行的核心思路 #

你在Root Layout里获取全局数据的方向是对的，App Router里顶层Layout（比如app/layout.js）是全局数据获取的最佳位置之一，因为它会在整个应用初始化时执行一次，且数据会被缓存（默认静态渲染下），完全可以替代Page Router里App.getInitialProps的全局数据传递作用。

不过你的代码可以优化下，确保数据能正确传递给子组件：

// app/layout.js
import { createContext, useContext } from 'react';

// 创建全局上下文
const AppContext = createContext(null);

// 导出自定义Hook，简化子组件数据获取
export function useAppData() {
  const context = useContext(AppContext);
  if (!context) throw new Error('useAppData must be used within AppContext.Provider');
  return context;
}

export default async function RootLayout({ children }) {
  // 同步Page Router里的逻辑，获取用户和店铺数据
  const response = await axios.get(url, payload);
  const { user, store } = response.data;

  return (
    <html lang="en">
      <AppContext.Provider value={{ user, store }}>
        <body>{children}</body>
      </AppContext.Provider>
    </html>
  );
}

子组件中直接通过自定义Hook获取全局数据：

// app/page.js
import { useAppData } from './layout';

export default function Home() {
  const { user, store } = useAppData();
  return (
    <div>
      <h1>欢迎，{user.nickname}</h1>
      <p>当前店铺：{store.name}</p>
    </div>
  );
}

二、要不要用Redux这类全局状态管理？ #

这取决于你的业务场景：

• 如果只是全局静态/准静态数据（比如用户基础信息、系统配置，不会频繁变更）：用上面的Context方案完全足够，没必要引入Redux，减少依赖更轻量。
• 如果涉及复杂状态交互（比如购物车状态频繁修改、多组件跨层级状态同步、异步状态更新逻辑复杂）：可以考虑用Redux、Zustand、Jotai这类库，其中Zustand和Jotai因为API更简洁，在App Router里适配性更好。

三、App Router数据获取的其他注意事项 #

• 顶层Layout的async数据获取默认是静态渲染（SSG），如果需要针对不同请求动态获取数据（比如根据请求Cookie获取当前用户），可以给Layout添加export const dynamic = 'force-dynamic'，或者在Server Component里直接读取请求参数。
• 单个页面/组件的独立数据，直接在对应的Server Component里写async/await获取即可，不需要强制全局传递，App Router的组件层级数据传递更灵活。
• 避免在Client Component里做全局数据的初始获取，因为Client Component在客户端渲染会有请求延迟，而顶层Layout作为Server Component，数据在服务端预取，性能更优。

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