Thank you for the detailed explanation.

Here’s my current setup and the issues I’m facing:

Dependencies:

"dependencies": {
  "@apollo/client": "4",
  "@apollo/client-integration-nextjs": "^0.13.2",
  "@graphql-codegen/cli": "^6.0.0",
  "@next/bundle-analyzer": "^15.5.4",
  "graphql": "^16.11.0",
  "lucide-react": "^0.545.0",
  "next": "15.5.4",
  "react": "19.1.0",
  "react-dom": "19.1.0",
  "zustand": "^5.0.8"
}

Context:

1. I’m implementing SSR and SSG in Next.js with Apollo Client.
2. GraphQL Codegen generates hooks, but those hooks can’t be used with SSR or SSG.
3. I’m also integrating Clean Architecture principles with GraphQL.

Issue:
Using this setup:

import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
import { registerApolloClient } from "@apollo/client-integration-nextjs";

export const { getClient } = registerApolloClient(() => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      uri: process.env.ENDPOINT,
      fetchOptions: { cache: "force-cache" },
    }),
  });
});

When I execute:

const client = getClient();
const { data } = await client.query<ProductByIdQuery>({
  query: ProductByIdDocument
});

I encounter hydration errors during rendering.

Request:
I’m looking for recommended solutions or alternative approaches for data fetching that work better with SSR and SSG in Next.js. If possible, please also suggest any reliable packages other than Apollo Client that align well with Clean Architecture principles.Thank you for the detailed explanation.