SPA Server Side approach

[sumantap8752196]

I am evaluating how is it possible to implement Server Side Rendering in SPA app with React and AEM as content service. This is the approach I see Next.js suggest to have per-rendered and all most all CMS system suggests:

1. User request a page from react app running on Node server

2. Node server requests JSON data from CMS through fetch call

3. Then React App reads this JSON and transform HTML into String like renderToString() and sends the response back to the user.

The disadvantage of this approach is that if JSON data from CMS is huge then first request takes long time. What alternate solution do you suggest?

[Mayank_Gandhi · Accepted solution]

@sumantap8752196  please post it on https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/ct-p/adobe-experience-mana...

[Nikhil-Kumar]

@sumantap8752196 

We also faced the similar issue regarding the size of the JSON as higher the number the pages, higher will be the :children array set and more time it takes.

Try setting up Gzip at the server level and try caching the JSON at Cloud Front.
Gzip compression helped us reducing the size of the JSON loaded thereby reduce the load time.

Also, try to raise a day care ticket and check with the Adobe Team as well.

Thanks,
Nikhil