AEM Headless Client and NextJS, combining server side and client side rendered content, errors | Community
Skip to main content
D
danieljkahn
Level 2
January 22, 2024
Solved

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

  • January 22, 2024
  • 3 replies
  • 1926 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by danieljkahn

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.

3 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
January 23, 2024

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
    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    January 29, 2024

    @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
    D
    danieljkahnAuthorAccepted solution
    Level 2
    January 29, 2024

    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.

      Terms & ConditionsAccessibility statement

      Loading footer...