如何在Next.js App Router的Apollo Client包装器中使用noStore？

在Next.js App Router中，客户端组件无法直接读取非NEXT_PUBLIC_前缀的运行时环境变量——这类变量默认仅在服务器端可用。要让ApolloWrapper（客户端组件）获取Docker Compose配置的BACKEND变量，推荐通过服务器组件传参的方式实现，具体步骤如下：

步骤1：在服务器组件RootLayout中传递环境变量 #

app/layout.tsx是服务器组件，可直接读取运行时环境变量，将BACKEND作为props传给ApolloWrapper：

import { ApolloWrapper } from './ApolloWrapper'
import './global.css'

export const metadata = {
  title: 'Welcome to example'
}

export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  const backendUrl = process.env['BACKEND']

  return (
    <html lang="en">
      <body>
        <ApolloWrapper backendUrl={backendUrl}>{children}</ApolloWrapper>
      </body>
    </html>
  )
}

步骤2：修改ApolloWrapper接收并使用传递的变量 #

更新app/ApolloWrapper.tsx，通过props接收backendUrl，并在创建Apollo Client时使用该值：

'use client'

import { HttpLink } from '@apollo/client'
import {
  ApolloClient,
  ApolloNextAppProvider,
  InMemoryCache
} from '@apollo/experimental-nextjs-app-support'

interface ApolloWrapperProps {
  children: React.ReactNode
  backendUrl: string | undefined
}

function makeClient(backendUrl: string | undefined) {
  if (!backendUrl) {
    throw new Error('BACKEND环境变量未配置')
  }

  const httpLink = new HttpLink({
    uri: backendUrl,
    fetchOptions: { cache: 'no-store' }
  })

  return new ApolloClient({
    cache: new InMemoryCache(),
    link: httpLink
  })
}

export function ApolloWrapper({ children, backendUrl }: ApolloWrapperProps) {
  return (
    <ApolloNextAppProvider makeClient={() => makeClient(backendUrl)}>
      {children}
    </ApolloNextAppProvider>
  )
}

替代方案（不推荐）：使用NEXT_PUBLIC_前缀 #

如果你不介意将BACKEND地址暴露给客户端，可将环境变量重命名为NEXT_PUBLIC_BACKEND，此时客户端组件可直接通过process.env.NEXT_PUBLIC_BACKEND读取，无需修改组件传参逻辑。但该方式会将变量嵌入客户端代码，仅适用于公开API地址场景。

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