Angular SSR is not displaying data from API in page source on browser for server deployed SSR but working on local prod build

Question

I have an angular 7 application and have made a universal version of the application (SSR for SEO purpose).

The application runs all smooth like before, all data from API are displayed perfectly in local mode as well as in server.

The issue is however when I view the "Page Source" on the browser the API data is not visible in browser if fetched from server.

package.json

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:ssr": "node dist/server",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "build:client-and-server-bundles": "ng build --prod && ng run nthexam:server:production",
  },

The command npm run build:ssr:stage && npm run serve:ssr build the SSR application and it works perfectly fine in local machine.

ISSUE

The page source on the browser do not show API data if SSR is deployed in server (ubuntu) however for static content its works all fine.

In local its works perfectly for static as well as API data, both are visible in page source in localhost.

After some search: I am using cloudflare, I tried by disabling all the cache, still of no use.

I tried this : Link But in few pages where I don't have any console error even then it don't show the data in page source, and local it works perfectly fine irrespective of the stated error.

Sydney Y · Accepted Answer · 2020-03-07 04:23:03Z

-1

The page source shows the static files requested from the server. Anything that happens on the client side, like API calls to your server, doesn't affect the source. You can see API data in the network tab in the xhr request or in the DOM under the elements tab if the data was parsed into the DOM.

answered Mar 7, 2020 at 4:23

Sydney Y

3,1503 gold badges11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mr X Over a year ago

In local setup all API data is showing in page source as well , else SSR is of no use.

Sydney Y Over a year ago

Then I guess I'm confused. Can you add a bit of code from source showing with the data and without the data?

Mr X Over a year ago

Think of a condition where you have to list all post from API, On local do: npm run build:ssr:stage && npm run serve:ssr and then check the page source it shows all posts in page source on browser. And doing the same in server : npm run build:ssr:stage && npm run serve:ssr just show the static content not the API data in page source on browser, for eg: this is page source

<header> //static data </header> <app-main> <h3>Show all post </h3>  <div> // in local it shows all post here  // in server this block is empty </div> </app-main><footer></footer>

Sydney Y Over a year ago

But the posts render on the page in both situations?

Mr X Over a year ago

yes all posts shows fine in UI just in page source it's the difference.

|

Collectives™ on Stack Overflow

Angular SSR is not displaying data from API in page source on browser for server deployed SSR but working on local prod build

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related