Тёмный

Server rendered Angular websites in literal minutes... 

Joshua Morony
Подписаться 78 тыс.
Просмотров 26 тыс.
50% 1

Опубликовано:

 

30 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 90   
@JoshuaMorony
@JoshuaMorony 11 месяцев назад
Join my newsletter for extra content: mobirony.ck.page/4a331b9076
@DavidSchmidt07
@DavidSchmidt07 11 месяцев назад
since the SSR funtionality is provided by an express application I would love it if we could easily integrate nestjs, so we can have angular like architecture on the backend and frontend out of the box.
@ianokay
@ianokay 11 месяцев назад
Oh this raises an interesting point, Angular on the backend is basically Nest... yeah 🤔
@toxaq
@toxaq 11 месяцев назад
Man I tried this with v16 and Nest JS just seemed to be a pain because they've rejected providing ES modules so I ended up in module hell and my "fun" side project turned to misery.
@ianokay
@ianokay 11 месяцев назад
@@toxaq I wouldn't think Angular and Nest should try to share anything or even be in the same repo. More so the thought is, Angular SSR in a sense should be (replace?) Nest
@toxaq
@toxaq 11 месяцев назад
@@ianokay The express portion of the nest integration needs to use angular universal for the SSR. I wish the Angular team would just pick up Nest and then we'd have integrated server and client end to end dev platform. Would be awesome. I enjoyed working in Nest.
@gianlucasantos3302
@gianlucasantos3302 11 месяцев назад
@@ianokay Just think about T3 Stack and it's popularity, it could be the same with Nest and Angular.
@netd777
@netd777 11 месяцев назад
You should make a video about analog and how it differs from vanilla angular SSR
@ianokay
@ianokay 11 месяцев назад
Great idea 💡
@maid768
@maid768 11 месяцев назад
If you‘re migrating to Analog it would be nice to see how you go about it and what changes you would have to do
@JoshuaMorony
@JoshuaMorony 11 месяцев назад
I'm going to at least try to migrate to Analog - if it goes well I will switch to it in prod, and if I can't do everything I need with it then we'll still just have lots of content for the channel
@toxaq
@toxaq 11 месяцев назад
More Angular SSR please. Interested also in how it would work with NX
@JoshuaMorony
@JoshuaMorony 11 месяцев назад
It's definitely coming, Nx too
@godlypotato4195
@godlypotato4195 11 месяцев назад
Server side rendering with the new syntax. Oh boy, we did a full 360 and re-invented PHP. Its literally PHP with extra steps.
@ianokay
@ianokay 11 месяцев назад
Looking forward to seeing some Angular SSG content in the near future and know how the migration from React went 🙌✨
@doubles6642
@doubles6642 11 месяцев назад
Can you show a way to deploy angular 17 Ssr on AWS amplify, It works as Ssr app if the app has no routes, if you add routes to the app it becomes spa
@SalehAbuhussein-wx7dy
@SalehAbuhussein-wx7dy 6 месяцев назад
what's the point of using angular if my sole concertn is SEO?
@dusski1
@dusski1 11 месяцев назад
I was like "yeah :nodding: yeah yeah :nodding: wait what, it's over already???" :D
@MrAvelino2010
@MrAvelino2010 11 месяцев назад
@JoshuaMorony awesome content. No black friday in your courses?
@JoshuaMorony
@JoshuaMorony 11 месяцев назад
thanks! and no I'm not running any black friday sales
@jeffnikelson5824
@jeffnikelson5824 11 месяцев назад
Hey Joshua, I bought your angularstart course with the early bird discount and I have to say I really love it. The information provided is really of high quality and very valuable for me. I wanted to ask you on your opinion about codegen tools like ng-openapi-gen, if you use them and when, maybe up and downsides and especially how you would combine them with new singals approach. I am thinking if it makes sense to setup custom templates that can hold properties of signals from the auto generated endpoints. Inspired by your approach in the simple-angular-todo-app module 3 TodoService. Do you mind to give me a few insights on that or maybe if you think the topic can be extended to do a whole video about it. Keep up the good work bro
@JoshuaMorony
@JoshuaMorony 11 месяцев назад
Hey Jeff, thanks - really glad to hear you're enjoying it! And I haven't actually done much with code gen tools so can't really give any thoughts/advice there, it is something I'd like to learn more about though
@jeffnikelson5824
@jeffnikelson5824 10 месяцев назад
@JoshuaMorony What do you think about adding more crud operations to the quicklist example in the course? I am somewhat insecure at that point and not sure if I should implement such operation in the reducer or as an side effect of an "action". for example calling a add/create endpoint - where is the best place to add it ? and if the endpoint returns the updated entity, where should I update the state in the signal. It would really help a lot if you could add such real world scenarios to your examples.
@JoshuaMorony
@JoshuaMorony 10 месяцев назад
​@@jeffnikelson5824 the chat appliaction deals more with this full round trip of data (e.g. sending data from the app to some backend and also receiving data back from the backend). But in general - let's say hypothetically the quicklists application actually stored data in some remote backend - I would have the "add" action switch to some request to send that data to the server (e.g. a standard http.post) - this can be done in conjunction with the reducer if you like e.g this.add$.pipe(/* switch to http request /*).subscribe(etc). For getting the data back into the application I would generally also want to be streaming from the backend back into the app - so the add$ action doesn't need to worry about updating the state, it just sends the request off to the backend. The data will flow back in by you having some source that is listening for data being added to the backend/db. Of course, all of this can be adapted to specific needs, but that is my general/basic approach.
@jeffnikelson5824
@jeffnikelson5824 10 месяцев назад
@@JoshuaMorony Thanks for the very interesting answer. I would like to go into the details on that one. Is there any way to reach out to you and have a chat ? don't know if you have a discord or similar
@BrandonRobertsDev
@BrandonRobertsDev 11 месяцев назад
👀
@yankotliarov9239
@yankotliarov9239 11 месяцев назад
What is even the point of SSR? SPA appered as a respose to user machines becoming faster than servers. And now we go back again?
@pouw_tv
@pouw_tv 11 месяцев назад
SEO is much better when using SSR, so if thats important for your use case its worth considering
@dimitritsikaridze6220
@dimitritsikaridze6220 11 месяцев назад
it user has disabled javascript they will at least see some content instead of blank page
@pazdyyy
@pazdyyy 11 месяцев назад
SPAs and they default rendering mechanism (CSR) are great for client side purposes and performance, dashboards, internal apps or just apps behind a login page in general, that's where they really shine. Problem with CSR is that is has really poor rendering performance at first as it takes a lot of time to start all that JS locally + it has none SEO as crawlers can't simply parse the content inside of JS files. So usually depends on your website and overall app design, but for example you can have public side of your web in SSG or SSR so you improve your SEO, conversions and your page is ranked really good at Google and then you can have your app as SPA behind a login page so you improve local performance, smoothness and just add native look and feel for your users.
@TayambaMwanza
@TayambaMwanza 11 месяцев назад
SPA is not good with SEO
@mazingguitar
@mazingguitar 11 месяцев назад
SPEEEEEEEEEEEEED! If you've ever battled some heavy Angular app performance you'd know :D
@nouchance
@nouchance 11 месяцев назад
Thank you Joshua 😊
@MonaCodeLisa
@MonaCodeLisa 5 месяцев назад
cool video, thank you for sharing but yeah why not just going with - Analog ?
@JoshuaMorony
@JoshuaMorony 5 месяцев назад
This video was published just after v17 and I think before I started getting more seriously involved in Analog - personally today I'd use Analog, but I still think it's useful to cover what Angular can do alone
@MonaCodeLisa
@MonaCodeLisa 5 месяцев назад
@@JoshuaMorony I agree completely :) I was only surprised because I think you mentioned Svelte-kit which is also nice... but not as nice :) but true that was 6m ago, time flies
@Emekaelo
@Emekaelo 11 месяцев назад
I'm in need of a resource that can show how to migrate an ssr app from v12 to v17 and then to convert the bootstrapped aspect to standalone because it seems that's how the v17 apps are. It's mainly the conversion aspect I need. I've upgraded to v17 but the ssr aspect doesn't seem in line with how it's supposed to be
@nickolaizein7465
@nickolaizein7465 11 месяцев назад
Is it possible to use ssr with some pages and spa with others ? Or if we choose ssr when config project, then everything will ssr only ? Thanks!
@olalekanraheem4655
@olalekanraheem4655 11 месяцев назад
Yes it possible
@CodingAbroad
@CodingAbroad 11 месяцев назад
Does this mean if you start a new angular 17 ssr project it’s actually analog under the hood? Also if you have an existing project in angular universal is it best to create a brand new angular 17 ssr project and copy the files across vs upgrading?
@JoshuaMorony
@JoshuaMorony 11 месяцев назад
Analog is a separate (and community created) thing - generating a new Angular SSR app will not bring in Analog you would have to specifically use Analog. As to your second question I don't know, I'm not familiar enough with the changes yet and never really properly used universal.
@pascalbe4508
@pascalbe4508 11 месяцев назад
Interesting, thanks for your insights. I'm using Gatsby for content pages and am wondering: What were your reasons to switch away from Gatsby? Is the ecosystem for tooling integration (CMS, ...) also good with SvelteKit and/or Angular?
@JoshuaMorony
@JoshuaMorony 11 месяцев назад
I'm willing to concede that it may be a skill issue not a Gatsby issue - but I found that my builds were super slow (in the realm of 5-10 mins) and I would often run into unclear errors/issues. I also just didn't really like the general approach all that much (e.g. how GraphQL is used). My whole workflow/build process just felt very painful/brittle. SvelteKit has been quite a lot nicer, and I don't have any complaints about it. I expected to like using SvelteKit more than I actually did - in general it works great and my builds are way faster now and the codebase much simpler. But I still find myself wanting to use Angular (even though I know it has nowhere near the SSR/SSG support of SvelteKit right now, but I'm hoping it moves toward that and I am willing to suffer a bit of pain along the way, especially if I can help move the needle in that direction)
@kresimirnovosel5307
@kresimirnovosel5307 4 месяца назад
is SSR only worth using from Angular v17+ or is it already optimised from v16 ?
@RobertKing
@RobertKing 11 месяцев назад
Keen to see diffeerent hosting options. Not really mentioned in the docs. Given our apis are cloud run, we could host anguoar there too, but would pay extra to avoid cold starts, and need CDN for static files. Theres cloud functions, netlify, CloudFlare etc
@codeandcloud
@codeandcloud 11 месяцев назад
Quick question. Lazy loading modules doesn't make a lot of sense the site is prerendered(ssr), right?
@siddharthkrishna2499
@siddharthkrishna2499 11 месяцев назад
Is it possible to do SSG for specific routes? I want the landing page and few other non protected routes to be rendered in advance for SEO. The other routes which use local storage and other browser APIs need not be prerendered.
@BrandonRobertsDev
@BrandonRobertsDev 11 месяцев назад
Yes, its possible. There is a "routes" array in the angular.json configuration for the build target where you can tell it which routes to prerender.
@JohPi
@JohPi 11 месяцев назад
Hello, I'm using Angular version 12.1.1 with server-side rendering, but the initial page load speed is very slow. I've tried various methods, but haven't seen any improvement. Could you guide me on how to address this issue? Thank you very much.
@zygas15
@zygas15 11 месяцев назад
I have a question. How can you handle in angular 17 to check user device type. In my project i have different komponent which depend on device type (mobile/desktop). Before 16 i could check user-agent to set isMobile flag on server. Now without RESPONSE, REQUEST tokent its not available, becouse new application build not use server.ts in development. It can be alse very bad to try hydration if we serve site on ssr in desktop mode but on browser its mobile version. Pls help
@saikrishna4943
@saikrishna4943 11 месяцев назад
How to crawl angular application with deploy angular in Php server with out running express or node
@rardk64
@rardk64 8 месяцев назад
Unless I'm mistaken, this doesn't actually do the server-side rendering of dynamic content, because it just deploys the browser folder's built content. You'd still need to run the server side rendering itself wouldn't you?
@joeyvico
@joeyvico 11 месяцев назад
Unrelated question Joshua: are you using a particular nvim distro and if so, which one? And are you on a Linux machine or Mac or Windows for your development? Love the look of nvim. Thanks mate
@JoshuaMorony
@JoshuaMorony 11 месяцев назад
I'm on a Mac and no distro but I do have my config public here: github.com/joshuamorony/nvim
@dimitritsikaridze6220
@dimitritsikaridze6220 11 месяцев назад
nvim startup time when he wrote nvim . seemed a bit slow considering it's supposed to be this instant powerful text editor
@joeyvico
@joeyvico 11 месяцев назад
@@JoshuaMorony awesome Joshua, thanks for sharing
@OttoCosterNL
@OttoCosterNL 11 месяцев назад
Anybody got experience with Angular SSR on Vercel or other hosting providers?
@chuny_dev
@chuny_dev 11 месяцев назад
Is this possible using github actions or not?
@ivelinpenchev
@ivelinpenchev 11 месяцев назад
I didn't know TheCherno did angular
@AmarSingh-uw1db
@AmarSingh-uw1db 11 месяцев назад
Gratitude ❤️
@dancingCamels
@dancingCamels 11 месяцев назад
Scully is good for making generated pages. Not used it for a while though
@007arek
@007arek 8 месяцев назад
It seems that this project isn't developed anymore
@mjdev-i1p
@mjdev-i1p 11 месяцев назад
Cool story bro but it all breaks down when you need SSR with dynamic content from a 3rd party. You can't just do HTTP-Requests during your build because this would scrutinize your Build-Server since people could do all kinds of requests from it. Everytime I need something with SSR Javascript is a pain in the ass.
@toxaq
@toxaq 11 месяцев назад
Why would you want to do HTTP calls during *build* time? SSR is provided on top of Express. Express can pull any data you want from anywhere and pump into an Angular component.
@oriollpz
@oriollpz 11 месяцев назад
They need to improve dev communication between server and client, you can't get access to the headers or so on.
@Dajuhf
@Dajuhf 11 месяцев назад
HttpInterceptorFn don't work for this?
@oriollpz
@oriollpz 11 месяцев назад
Not if you want to intercept the request header from the server side, HttpInterceptorFn just works from the client side. @@Dajuhf
@sivuyilemagutywa5286
@sivuyilemagutywa5286 11 месяцев назад
I use Angular for Mid to Big projects, but for static sites, blogs Angular is an overkill for me, I prefer Astrojs,
@stupidddd
@stupidddd 11 месяцев назад
might aswell just add #ad at the end lmfao
@sivuyilemagutywa5286
@sivuyilemagutywa5286 11 месяцев назад
@@stupidddd what is #ad?
@Petoj87
@Petoj87 10 месяцев назад
What git ui did you use?
@JoshuaMorony
@JoshuaMorony 10 месяцев назад
I use lazygit
@Petoj87
@Petoj87 10 месяцев назад
@@JoshuaMorony thanks 🙏
@julioburgos3962
@julioburgos3962 11 месяцев назад
i d rather use analogjs for ssr
@Gy987654321
@Gy987654321 11 месяцев назад
Im using server side rendering almost four years now.
@CodingAbroad
@CodingAbroad 11 месяцев назад
As in angular universal?
Далее
10 Rendering Patterns for Web Apps
6:55
Просмотров 339 тыс.
Angular change detection explained in 5 minutes
6:06
Git bisect is insanely good (and so easy)
4:00
Просмотров 86 тыс.
The perfect use case for RxJS... violins?
9:26
Просмотров 8 тыс.
React Native vs Flutter - Which should you use?
22:31
Zoneless Angular Applications in V18
14:00
Просмотров 18 тыс.