Next.js Pages Router中如何结合getServerSideProps与React Context？

核心思路是借助_app.js作为全局入口，将页面组件通过getServerSideProps获取的数据传递给全局Context Provider，实现全应用共享服务端数据。具体步骤如下：

1. 创建全局Context及Provider组件 #

先定义Context和对应的Provider组件，让它接收外部传入的数据作为Context的值：

// contexts/UserContext.js
import { createContext, useContext } from 'react';

const UserContext = createContext(null);

export function UserProvider({ children, user }) {
  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
}

2. 在_app.js中挂载Provider #

_app.js是所有页面的入口，页面组件通过getServerSideProps返回的数据会被包含在pageProps中。我们在这里将pageProps中的服务端数据注入到Context Provider：

// pages/_app.js
import { UserProvider } from '../contexts/UserContext';

export default function MyApp({ Component, pageProps }) {
  const { user } = pageProps;

  return (
    <UserProvider user={user}>
      <Component {...pageProps} />
    </UserProvider>
  );
}

3. 在页面组件中通过getServerSideProps获取数据 #

在需要获取服务端数据的页面组件中，编写getServerSideProps逻辑，将获取到的用户数据作为props返回：

// pages/index.js
export default function HomePage({ user }) {
  return <div>当前用户：{user.name}</div>;
}

export async function getServerSideProps(context) {
  // 模拟从服务端接口获取用户信息，可根据实际业务调整
  const res = await fetch('https://api.example.com/user', {
    headers: {
      Cookie: context.req.headers.cookie || '' // 传递Cookie获取当前登录用户
    }
  });
  const user = await res.json();

  return {
    props: { user } // 该数据会传入_app的pageProps
  };
}

4. 在任意子组件中消费Context #

应用内的任何组件都可以通过自定义的useUser Hook获取全局用户数据：

// components/Navbar.js
import { useUser } from '../contexts/UserContext';

export default function Navbar() {
  const user = useUser();
  return <nav>欢迎，{user.name}</nav>;
}

优化：避免重复编写getServerSideProps #

如果多个页面都需要获取用户数据，可以封装公共函数复用逻辑：

// utils/withUser.js
export async function getUserFromServer(context) {
  const res = await fetch('https://api.example.com/user', {
    headers: {
      Cookie: context.req.headers.cookie || ''
    }
  });
  return await res.json();
}

// 页面组件中直接调用
export async function getServerSideProps(context) {
  const user = await getUserFromServer(context);
  return { props: { user } };
}

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