AEM Headless Client and NextJS, combining server side and client side rendered content, errors

[danieljkahn]

We are running NextJS with the majority of queries being called from getServerSideProps to allow for SSR. The only exception is our search page, which we want dynamic results updates, thus require client side rendering.
I produced a test case which uses the same queryVariables, and ensured the aemHeadlessClient object contains the same properties as such:
queryVariables:

{
path: '/content/dam/myapp/myfolder/',
variation: 'master',
locale: 'en'
}

aemHeadlessClient:

{
auth: [ 'admin', 'admin' ],
headers: undefined,
serviceURL: 'https://publish-p111352-e1121568.adobeaemcloud.com/',
endpoint: 'content/_cq_graphql/myapp/endpoint.json',
fetch: fetch
}

Then we call the query:

let pages = await this.aemHeadlessClient.runPersistedQuery(
'myapp/page-list',
queryVariables
);

Server side responds as expected from the pageList persisted query. Client side is called from useEffect within a component and responds with undefined and the following error:

AEMHeadlessError: [AEMHeadless:REQUEST_ERROR] General Request error: Failed to execute 'fetch' on 'Window': Illegal invocation`

Am I missing something here?
Is there a specified way to differentiate a client-side request vs server-side?
Any insight is greatly appreciated. Please let me know if I can provide any other helpful information to solve the problem.

[EstebanBustamante]

Can you try the below config for your aemHeadlessClient? I am wondering if the fetch function you are passing is messing up when executed on the client side:

    this.aemHeadlessClient = new AEMHeadless({
      serviceURL,
      endpoint,
      auth: ['admin', 'admin'],
      fetch
    });

[kautuk_sahni]

@danieljkahn Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

[danieljkahn · Accepted solution]

While the issues when combining server-side and client-side implementations with AEM Headless Client remain, I did find a different and better solution.

Learning more about NextJS, I discovered that I can call API routes from the client, while keeping all of the API logic happening server-side. So I moved the AEM Headless Client requests to an API route, which then could be called from the client-side. This way, the API requests and sensitive environment variables remain on the server, and the client merely interacts with the API route.