Why is Angular Universal so lackluster?
After working with Nuxt.js and Next.js, which are frameworks that are focused on SSR, SEO or a hybrid SPA approach, it baffles my mind that Angular's offer to solve the same problem is Angular Universal. It has one page of documentation on the official site and developing for it seems to be a very big challenge. Has anyone here actually built a production app with Angular Universal? What are your thoughts on this?
https://www.reddit.com/r/Angular2/comments/rv0i1t/why_is_angular_universal_so_lackluster/
level 1
I have used it to build several apps that are in production and it has worked just fine.
It wasn't a big challenge working with it.
The installation schematics did almost all the job.
If you open the angular universal github repo you'll find a lot of information about it.
11
level 1
Practically all apps I have built with Angular are backoffice apps, where the initial load time is not mission-critical.
Out of curiosity I've looked into Angular Universal a couple of times over the years but always gave up since the added complexity was of completely no benefit to the (my) end user.
The back office user is not going to close the application because he has to wait for 5 seconds, as opposed to opening an online shops where these miliseconds count.
Angular is awesome for what it is targeting (enterprise apps), but (imho) not great for landing pages.
18
level 2
Load time is awesome fast ifusing LazyLoading correctly, and a proper Module architecture. Angular has a “first time paint” faster than any SSR alternative because it will start pulling data in the eyes of the User, instead of rendering and serving. If it is taken for you ages, please review the architecture of your Angular app and the quality of your backend APIs ( if data is taking ages to be served through REST Apis). The main problem, and the reason of Angular being used as Office, Governments, non-SEO websites is because the bad SEO an Angular app has.
3
level 2
OP·1 yr. ago
Yes, that's the general problem with SPA apps. But even React and Vue.js created Next.js and Nuxt.js to get around that issue, so I think it would only be natural that Angular could provide something of the same kind and quality.
5
level 3
The issue isn't with SPAs alone but with who the frameworks are targeted towards. From the image I get, Angular clientele tends to be B2B where SEO/UX aren't that critical, so I assume they don't devote that many resources there.
The Angular team seems to be pretty spread thin sometimes so I think they just focus on the stuff most needed by the dev community.
10
level 3
Actually I think this might be the difference. Next and Nuxt are community projects with their own teams developing them on top of React and Vue. Angular Universal is handled by the Angular team (or maybe a sub-team, I don't know.)
2
level 4
Angular universal was the brain-child of like one dude (patrickjs) dating back to 2016.
3
level 1
In my experience Angular Universal is pretty straight-forward. Have you actually tried it or you just went to the docs site and thought it's too hard?
What exactly seems like a big challenge to you? Specifics...
3
level 1
My thoughts are that you don't need it at all. Angular is for Single Page Apps, you don't SEO apps. If you want an indexable public web site, don't create a SPA, just create a freaking web site!
4
level 2
And... you still need a framework to build a website. Which comes back to either one of Angular/React/Vue (intentionally leaving out Svelte, Ember, etc for simplicity).
How else do you create website without these framework?
3
level 3
You don't need frameworks. But even if you want one, you should use the backend framework, like Nest.js or Spring.
3
level 3
Somehow the Space Jam website existed in 1996, long before angular 1 in 2010 and react in 2013.
3
level 4
This is like asking people to build everything with assembly. Just because you can doesnt mean you should.
5
level 5
Just because you can doesn’t mean you must either. For a regular old normal website, front end frameworks can be overkill. Something like Flask or Express on the other hand, to handle routing and templating is not that strange.
1
level 3
You don't necessarily need frameworks, even Google/Alphabet doesn't use Angular for most of its popular websites. And to be pedantic, some of those are frameworks and some libraries.
You can just build a site with HTML, JS (using libraries or vanilla JS) and Webpack or something similar. It would most likely be harder, but you can.
But more to the point, you can also build a website/MPA with most of those frameworks you mentioned. Again, it would most likely be harder since most of them are designed around SPA, but you can.
1
level 3
You know you can make a website without frameworks right?
1
level 1
Is there a good angular static site solution? Agree universal doesn’t deliver based on my experience. In the process of recreating my personal website with gatabyjs (which nicely uses react) to transition an angular landing page I currently use. Its nice how it leverages the react component model.
3
level 2
Maybe take a look at this: https://scully.io/
6
level 1
...and with localization it's a different beast. I don't think I could tame the Google SEO as much as I wanted to with multiple languages. I did have some strategies to circumvent the issues but haven't got the time to implement them.
3
level 2
I have the same problem with mu ecommerce website. Still haven’t figure out the best solution for that…
1
level 3
AFAIK, for all your products in all the languages (this could go crazy in numbers pretty quickly : 100 products × 25 langs will have 2500 diff urls) you will have to pregenerate paths (because No JS for search engines (i know GSE has JS running capabilities but no guarantee )) and SSR will create static index.html inside those paths. Search engines will access the non-JS version to index and real user will see the hydrated version. Just some pointers as i might not be technically very accurate because i did it a while ago.
1
level 2
In-depth article on handling localization with server-side rendered apps:
https://medium.com/angular-in-depth/lost-in-translation-strings-846566376951
1
level 3
There was not much problem with publishing different localized pre-rendered versions (though it had its own quirks which i dont remember right off the bet). IIRC i had to write script for deployment (my infra had - Amazon S3 bucket, Cloudfront, Lambda function). By the way, for the sake of simplicity and familiarity , i used transloco instead of built-in angular translation. My goal was to have Google et. al. index all the localized versions of my site at once and ASAP (not after sometime as is usually the case with SPAs), but I was only partially successful in achieving the goal.
1
level 1
Comment deleted by user·1 yr. ago
level 1
If you need to implement seo in a simple angular app with your own hosting solution, the documentation handles this case pretty well. But if you're using firebase, i18n, angularfire2 with firestore that's where the fun begins. Implementing angular universal in our app was the worst dev experience I ever had in my career so far. Once you figure out how to serve your i18n builds in your cloud function, you think you're done with your solution. But guess what? Pretty much any request to firestore can freeze your server, resulting to an internal server error and no clue in your cf logs. I had to test every request called on page load to see which one was responsible. At last, it worked. Then 6 months later, new versions: angular 12 and new angularfire api. I gave up. It seems like it is impossible to make the two to work together. Now, I am on angular 12 with the older version of angularfire2, hoping that Google will solve this mess one day.
3
level 2
OP·1 yr. ago
Does firestore use promises? Could it have something to do with the event loop getting clogged up?
1
level 3
·1 yr. ago·edited 1 yr. ago
It uses observables to get updates in real time (you can also use promises of course).
This is clearly related. But there 's no unresolved request in my case. NgZone stays on a unstable state which hang the server response. But it is not always the case depending of the situation which is pretty hard to debug. Without ssr (csr), the app works fine.
With the new firebase Api though, issues are straightforward. All observable based calls lead to a server error. Promise based calls work. But I cannot switch all my app to promises calls.
2
level 4
I used to get this problem before as well. I think it is because the Firestore sdk uses longpolling to listen for changes when you are listening for changes, so the framework has a hard time realizing that you are actually finished rendering (it appears to angular as if there are still outstanding promises). I think the maintainer of angularfire put in some hacks to get this to work properly and the problem just kind of went away for me luckily.
2
level 5
If you could share a link to those hacks, that would be very nice of you.
1
level 1
They don't use Universal at Google internally much, which is why it's not quite up to the same standards as the rest of the framework. It gets less priority from the team.
Having that said, once you manage to set it up, it works well. It can be very tricky to do so for projects with a lot of dependencies tho, because you just have to hope they can all run in a NodeJS environment
4
level 1
You can give a try to Scully, behind scene works different (with puppeteer launching a chrome headless' instance), but I've read that works nice
2
level 1
You can't compare Universal to Next and Nuxt because they aren't the same thing. Universal isn't much more than a solution for rendering existing Angular apps in a nodejs environment with a couple of helper classes for rehydrating the app in the browser environment. It isn't a new framework and there exist similar libraries for rendering existing React apps serverside.
Next and Nuxt on the otherhand are full frameworks for building isomorphic javascript apps and have been built from the ground up with that goal in mind. Their holistic approach to building these kind of apps is why they do it so much better than Universal.
It also helps that Next is well funded and has a dedicated development team _outside_ of the React team. Universal is maintained by the Angular team and they quite frankly have enough on their plate maintaining just he core framework, not to mention all the extra bells and whistles. There is a reason why libs like @angular/pwa and @angular/elements don't get a lot of love.
Now, it is 100% possible to build a Next / Nuxt-like framework for Angular by leveraging the core framework and rendering pipeline like how React and Vue are being used in Next and Nuxt. It would just take a lot of work.
2
level 1
Angular Universal is a “hack”, I have been following it through the years and it is, sadly, a no go in its current status. If you need SEO dont use Angular, use a SSR solution. And with SEO I mean not just Page Ranking but (the most important bit) sharing links: whatsapp, nor Twitter, nor Facebook will show what you expect (since they dont wait the page to be loaded). Angular Universal needs you to Pre-render static pages. But the pages are not static, so what happens with pages of the kind product/:id or product/:slug? Do I have to prerender a page in real time each time an user creates a new product? Or Post?etc? What if I have 3 Millions of products? Do I have to prerender 3M of pages? No go. Aside of other issues Angular Universal have, for me this is the most important bit.
However I believe Angular is trying to do something. The first step they are doing is to remove Modules, and let the Components to be standalone. So next year we will see standalone Components, creating an alternative to React components. This way, with standalone Components importing other components, services, etc, we would be able to use them as pieces inside a PHP, Node or any other SSR solution. Being PHP and Node the ones managing all Routing ( and we losing Router, etc) and the Angular Components being just part of the SSR page. Removing Modules will free the Routing, and freeing the Routing but letting the Components to talk via Services, Input/Output, Directives, Pipes...will be still possible. So moving into some Reactish/Vueish approach.
So I still have hopes regarding Angular Universal as a NodeJS framework loading standalone Components, and maybe they can do some magic in hydrating a SPA if your NodeJS paths matches the Angular SPA ones or something.
2
level 1
I use Scully.io. it's just easier to work with and does more or less the same thing as universal.
2
level 1
Here's a quick and easy, start to finish, run through of setting up Angular Universal with Firebase Hosting & Functions that should help any of you looking for a good tutorial(not made by me):
https://www.youtube.com/watch?v=k7pLxaKkHYs
2
level 1
Analogjs.org
1
- 登录 发表评论