Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 2

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.

1 Accepted Solution

Avatar

Correct answer by
Level 2

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.

View solution in original post

3 Replies

Avatar

Community Advisor

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
    });

 

 



Esteban Bustamante

Avatar

Administrator

@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.



Kautuk Sahni

Avatar

Correct answer by
Level 2

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.