SSR functionality is not working

[rasheedhere-architech]

Hi guys,

I tried to implement Server side rendering the React SPA in our project by following the documentation as mentioned below but didn't find it is working.

I was able to start the nodejs server fine on 4200 and configured the path in servlet config as well.

But I tried to hit the localhost:4200/path/to/page, I am getting back response like,

Can someone please advice if I am missing something here,

<div><div class="aem-page page "><div><div class="aem-container aem-Grid aem-Grid--12 aem-Grid--default--12"><div class=" aem-GridColumn aem-GridColumn--default--12"><div class="aem-container aem-Grid aem-Grid--12 aem-Grid--default--12 main-grid"></div><div></div></div></div><div></div></div></div><div></div></div>
        <script type="application/json" id="__INITIAL_STATE__">
            {"rootModel":{"title":"Home ",":type":"components/structure/page",":items":{"root":{"columnCount":12,"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","columnClassNames":{"footer":"aem-GridColumn aem-GridColumn--default--12","header":"aem-GridColumn aem-GridColumn--default--12","backtotop":"aem-GridColumn aem-GridColumn--default--12","beta-alert":"aem-GridColumn aem-GridColumn--default--12","responsivegrid":"aem-GridColumn aem-GridColumn--default--12"},"allowedComponents":{"applicable":false,"components":[{"path":"/conf/airmiles/settings/wcm/templates/page-template/structure/jcr:content/root/wcm/foundation/components/responsivegrid","title":"Layout Container"},

..........
...........
        </script>

Here is the documentation I followed,

In order to get the server side rendering to work run the following commands

npm run build

then 

API_HOST=http://localhost:4502 npm run start:server

This will open a server on port 4200 so you can navigate to http://localhost:4200/content/we-retail-journal/react/home.html to see the running example

## Enabling the Server-Side Rendering using the AEM page component
In order to have a page component rendered Server-Side via AEM and the page component HTL template, 
navigate to the page component [0] and modify the template to request the _GetPreRenderedPageBody_ service to fetch the SPA HTML content from a remote node server. 
In the current sample project, the node server runs locally via the `npm run start:server` command line.

### SSR Setup

0. Modify the page component HTL template [a,b]
1. Start the local NODE.js server [c]
2. Request the page from your browser
3. Using a web browser, navigate to one of the pages of the app

a. Location of the page component HTL body template

../content/jcr_root/apps/we-retail-journal/react/components/structure/page/body.html

b. Expected content of the page component HTL body template

c. Command to start the local node server

API_HOST=http://localhost:4502 APP_ROOT_PATH=/content/we-retail-journal/react npm run start:server

### Configuring the _GetPreRenderedPageBody_ service

1. Navigate to http://localhost:4502/system/console/configMgr
2. Search for the configuration called _Single Page Applications - Server Side Rendering Configuration_
3. Open the dialog and update the default values

[godanny86]

hi @rasheedherel1 that is the expected output of the node server (4200). Assuming you have updated the page component HTL and configured the GetPreRenderedPageBody service in AEM, you should now be able to navigate to AEM localhost:4502/path/to/page and see the SSR in action

[rasheedhere-architech]

hi @rasheedherel1 that is the expected output of the node server (4200). Assuming you have updated the page component HTL and configured the GetPreRenderedPageBody service in AEM, you should now be able to navigate to AEM localhost:4502/path/to/page and see the SSR in action

Hi @godanny86, thanks for the quick response. I see that page is being rendered server side, but I see we are still making the js calls even though it is not required. Is there any way we can avoid these unnecessary js calls from the script tags on client side. Cheers!

[godanny86]

hi @rasheedherel1 if set up correctly you should not see any XHR calls to .model.json on the initial page load. Are you still seeing those requests?

[rasheedhere-architech]

@godanny86 You are right, I don't see .model.json calls when in SSR. But I still see .js (client-libs, main, we-retail-journal-react-app) calls on page load, which I shouldn't see if the page is being rendered server side.

If I disable javascript in the browser then I don't see any .js and .model.json calls as well.

But I see page being server side rendered in all cases. Just that we are unnecessarily making .js calls when SSR.

Any insight on why the behaviour is like this?

[godanny86]

hi @rasheedherel1 the goal of SSR is simply to accelerate the initial page load, so that content is visible before the .js and avoid the extra .model.json request. It is expected to eventually load the JS and have it take control of the app.

[rasheedhere-architech]

Ok thanks! @godanny86

[godanny86]

will close for now, feel free to open if you have other questions!

[rasheedhere-architech]

Thanks! @godanny86