Server side angular app is very slow compared to non-ssr app

Question

My angular app has been converted into server side and currently rendering it via node server. The dist size has been doubled now (3 + 3 Mb) due to server & browser folders.
Same app, I have built as a regular app (without SSR) and deployed on Apache server
SSR App which is getting served via node server (https://billionlearners.com) is taking very long to load and render. Average FCP: 4000 (Displayed in console)
Non-SSR App which is getting served via Apache server (https://sandbox.billionlearners.com) is taking less time to load and render. Average FCP: 400 (Displayed in console)

This can be confirmed via https://tools.pingdom.com/ as well.

Somehow I was under the impression SSR is faster, am I missing anything? Am I building/deploying in the wrong way?

Thanks in advance

Maybe Apache is faster than the node server. Try installing the Non-SSR App on another node server and see if it is slower as well. — Jerry Jeremiah, Jul 18 '23 at 05:09
Non-SSR app on node server gives almost same performamce as non-SSR app on Apache. — user2869612, Jul 26 '23 at 10:04
After a lot of trial and error, upgrading to Angular 16 solved my problem. Performance is not improved, but now it's comparable. — user2869612, Aug 07 '23 at 02:19

The scion · Answer 1 · 2023-07-31T11:23:27.823

TLDR for comparing the 2 web site you have to make sure that thery are using the same data and the same code (in server side or not), it looks like they are not equalls.

I compare the 2 response that you got for both web sites and it looks like your server side return different responses.

The top one (Angular) got 6.7 MB and 61 requests and and the bottom (SSR) got 6.9 MB and 65 requests. Not something that can explain the time differences but still something to check.

I compared the responses between the 2 web site, the most heavier one and I found that they are not equals. Why?

I check it in jsondiff to compare the 2 responses-

Lazy loading- Antother thing that caught my eye, why don't you use lazy loading for your cards? Don't load all the cards that on the page, just the cards that available without scrolling, When the user scroll down, load the rest of the data

yes, the 2 sites are a little different, one is the production and another is a sandbox but they are almost the same (UI code, box config, API server code etc). Nevertheless, I did create another 2 sites that are 100% identical, one running with ssr and another without ssr but still faced the exact same issue. SSR site is very slow compared to non-ssr. Finally, I upgraded to Angular 16 and now the performance gap seems to have reduced drastically. https://uiappnode.sandbox.billionlearners.com/ => non-ssr https://ssruiappnode.billionlearners.com/en/landingpage => ssr — user2869612, Aug 07 '23 at 02:15

score 0 · Accepted Answer · answered Aug 16 '23 at 08:14

Many different ways were tried, including Lazy Loading of modules, reducing main package size, zipping etc. It did improve the performance a bit but no substantial improvement was seen.

Recently upgraded to Angular 16 and updated all config file accordingly including SSR related config files. Added client Hydration as well. Now performance has improved remarkably.

So either some config was wrong Or upgrade to Angular 16 did the trick. But site (https://billionlearners.com) is super fast.

Server side angular app is very slow compared to non-ssr app

2 Answers2