英文:
Server side angular app is very slow compared to non-ssr app
问题
-
我的Angular应用已转换为服务器端，并通过Node服务器进行渲染。由于服务器和浏览器文件夹，dist文件大小现在已经翻倍（3 + 3 Mb）。
-
同一个应用，我已经构建成一个常规应用（没有SSR）并部署在Apache服务器上。
-
通过Node服务器提供的SSR应用（https://billionlearners.com）加载和渲染时间很长。平均FCP：4000（在控制台中显示）。
-
通过Apache服务器提供的非SSR应用（https://sandbox.billionlearners.com）加载和渲染时间较短。平均FCP：400（在控制台中显示）。
这可以通过https://tools.pingdom.com/确认。
不知何故，我以为SSR更快，我是否遗漏了什么？我是否以错误的方式构建/部署了？
提前感谢。
英文:
-
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
答案1
得分: 0
TLDR
要比较这两个网站，你必须确保它们使用相同的数据和相同的代码（在服务器端或非服务器端）。看起来它们并不相等。
- 我比较了你获取的这两个网站的响应，看起来你的服务器端返回了不同的响应。
顶部的那个（Angular）有6.7 MB和61个请求，底部的（SSR）有6.9 MB和65个请求。虽然这不能解释时间差异，但仍然值得检查。
- 我比较了这两个网站的响应，最重的一个我发现它们并不相等。为什么？
我使用jsondiff进行了这两个响应的比较-
- 惰性加载- 吸引我的另一件事情是，为什么你不使用惰性加载来加载卡片？不要加载页面上的所有卡片，只加载可见的卡片，当用户向下滚动时，再加载其余的数据。
英文:
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
答案2
得分: 0
许多不同的方法都尝试过，包括模块的惰性加载，减小主包大小，压缩等。这确实稍微提高了性能，但没有看到实质性的改善。
最近升级到了Angular 16，并相应地更新了所有配置文件，包括与SSR相关的配置文件。还添加了客户端水合。现在性能有了显著提升。
所以要么是某些配置错误了，要么是升级到Angular 16起到了作用。但网站（https://billionlearners.com）速度非常快。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论