在Next.js中，没有原生函数来a）从API检索数据，B）在服务器上执行，c）使其在每个页面上可用，以及d）仅在用户访问的第一个页面上查询API。
正如您所发现的，getInitialProps和getServerSideProps将在您每次访问该页面时运行。

• 但是 *，我们可以让它工作。

如果在初始加载之前需要数据

1.在_app.js中使用getInitialProps从API检索数据
1.将数据加载到_app.js文件内的React上下文中，使其在页面之间持续存在
1.当浏览器获得数据时，创建一个cookie。
1.在getInitialProps中加载后续页面时，检查是否有cookie，如果有，则不检索数据。
在Next.js项目中，有一个相当流行的库nookies可以帮助处理cookie。

如果可以加载页面，则提取数据

在_app.js中使用getInitialProps会产生性能成本：你将永远无法创建一个完全静态的页面，这是因为getInitialProps必须在每次页面加载时运行。
如果可以在页面加载之后获取数据，则添加一个API route，然后在上下文提供器中使用useEffect获取数据。

Next.js 13个以上答案

Next.js实验性应用文件夹现在完全涵盖了这个用例。
1.在React服务器组件（RSC）布局中提取数据
1.在此布局中，使用此值呈现React上下文
1.根据需要在应用程序中使用此上下文
当然，您可以在树中更靠下的RSC中设置这个上下文，例如，如果您只在某个页面或页面的某个组件上需要它。
在这个真实的例子中，我从页面RSC中获取一个调查定义，并通过上下文将其传递给客户端代码。
React服务器组件（此处为页面）的示例代码：

// /app/referer/page.tsx (Server Component)
import { headers } from 'next/headers'
export default async function Page() {
  const headersList = headers()
  const referer = headersList.get('referer')
  return (
    // we set a CLIENT context,
    // based on the SERVER context that we got via headers()
    <RefererProvider value={referer}>
      <InteractiveReferer />
    </RefererProvider>
  )
}

客户端上下文的示例代码：

// /components/InteractiveReferer.tsx (Client Component)
// use "client"
export const InteractiveReferer = () => {
  // this context has been initialized by a parent RSC
  // but we can access it as expected in a Client Component
  const referer = useRefererContext()
  const [clickedReferer, setClickedReferer] = useState(false)
  return (
    <button
      onCLick={() => {
        setClickedReferer(true)
      }}
    >
      Referer: {referer}
    </button>
  )
}

Next.js app文件夹的另一个新奇在于，现在服务器端代码不再局限于页面级getServerSideProps。嵌套组件也可以是服务器组件并触发服务器调用。因此，有时候您可能不仅需要设置客户端上下文，还需要设置一种服务器端上下文，其作用域为当前请求。
I describe this use case extensively，总结一下，可以使用React 18 cache函数（在撰写本文时没有文档）来实现这个目标。
我精心制作了an open source demonstration of this pattern，可以通过以下代码示例进行总结：

import { cache } from "react";

export const getServerContext = cache(() => ({
    // a dummy context for the demonstration
    createdAt: Date.now().toString(),
    calledByLayout: false,
    calledByPage: false,
    calledByNested: false
}))

您可以直接改变返回值以在此上下文中存储新信息。

也许Redux可以解决你的问题，API会触发不必要的消费者重新呈现。

您可以尝试使用getInitialPropsin the Page Component itself
这样，数据提取将只针对该页进行。