NextJS：_app.tsx中替代getServerSideProps的多页共用数据传参方案

针对你遇到的「_app.tsx无法使用getServerSideProps，且useEffect引发数据未初始化问题」，这里提供几个Pages Router下的标准解决思路：

方案1：在_app.tsx中使用getInitialProps #

虽然NextJS更推荐用getServerSideProps/getStaticProps，但_app.tsx支持getInitialProps，可在服务端或客户端首次加载时获取数据，直接传递给所有页面组件。

修改你的_app.tsx：

// _app.tsx
import type { AppProps } from 'next/app'
import getMyData from '../path-to-your-data-fetch-function'

function CustomApp({ Component, pageProps, initialData }: AppProps & { initialData: DataPoint[] }) {
  return (
    <Component {...pageProps} initialData={initialData} />
  )
}

CustomApp.getInitialProps = async (appContext) => {
  // 获取共用数据
  const initialData = await getMyData()
  // 获取页面本身的props
  const appProps = await App.getInitialProps(appContext)
  return { ...appProps, initialData }
}

export default CustomApp

页面组件直接使用传递的initialData，无需额外用useState初始化（除非需要本地修改）：

// index.tsx
export function Index({ initialData }) {
  return <Graph data={initialData} />
}

注意：getInitialProps会在服务端渲染和客户端导航时都执行，若只需服务端获取，可在函数内判断appContext.ctx.req是否存在。

方案2：全局状态管理（Context API / Redux） #

如果数据需要在客户端动态更新，或希望在组件树中全局访问，用状态管理更合适。

用Context API实现： #

1. 创建数据Context：

// contexts/DataContext.tsx
import { createContext, useContext, useEffect, useState } from 'react'
import getMyData from '../path-to-your-data-fetch-function'

const DataContext = createContext<DataPoint[] | null>(null)

export function DataProvider({ children }) {
  const [data, setData] = useState<DataPoint[] | null>(null)

  useEffect(() => {
    const fetchData = async () => {
      const result = await getMyData()
      setData(result)
    }
    // 仅在客户端首次加载时获取
    if (!data) fetchData()
  }, [data])

  return (
    <DataContext.Provider value={data}>
      {children}
    </DataContext.Provider>
  )
}

export function useData() {
  const context = useContext(DataContext)
  if (!context) {
    throw new Error('useData must be used within a DataProvider')
  }
  return context
}

2. 在_app.tsx中包裹Provider：

// _app.tsx
import { DataProvider } from '../contexts/DataContext'

function CustomApp({ Component, pageProps }: AppProps) {
  return (
    <DataProvider>
      <Component {...pageProps} />
    </DataProvider>
  )
}

3. 页面组件直接用自定义hook获取数据：

// index.tsx
import { useData } from '../contexts/DataContext'

export function Index() {
  const data = useData()
  // 处理数据未加载状态
  if (!data) return <div>Loading...</div>
  return <Graph data={data} />
}

方案3：复用页面级数据获取函数 #

如果不想用全局方案，可封装共用的获取函数，在每个页面的getServerSideProps或getStaticProps中调用：

// utils/fetchSharedData.ts
export async function fetchSharedData() {
  return await getMyData()
}

然后在页面中使用：

// index.tsx
import { fetchSharedData } from '../utils/fetchSharedData'

export function Index({ sharedData }) {
  return <Graph data={sharedData} />
}

export async function getServerSideProps() {
  const sharedData = await fetchSharedData()
  return { props: { sharedData } }
}

// anotherPage/index.tsx
import { fetchSharedData } from '../utils/fetchSharedData'

export function AnotherPage({ sharedData }) {
  return <Table data={sharedData} />
}

export async function getServerSideProps() {
  const sharedData = await fetchSharedData()
  return { props: { sharedData } }
}

优势：每个页面可独立控制数据获取逻辑，同时复用核心函数；数据在服务端预取，避免客户端useEffect的加载延迟。

方案4：App Router 下的服务端组件（NextJS 13+） #

若已迁移到App Router，可直接在根布局（app/layout.tsx）中用服务端组件获取数据，所有子页面均可访问：

// app/layout.tsx
import getMyData from '../path-to-your-data-fetch-function'
import { DataProvider } from './contexts/DataContext'

export default async function RootLayout({ children }) {
  const initialData = await getMyData()
  return (
    <html>
      <body>
        <DataProvider data={initialData}>
          {children}
        </DataProvider>
      </body>
    </html>
  )
}

客户端组件通过Context或props接收数据即可。

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