Angular 17 SSR - Angular Server Side Rendering in a New Way
ฝัง
- เผยแพร่เมื่อ 13 ก.ค. 2024
- Angular 17 SSR completely changes how we implement Angular server side rendering. Previously we used a package Angular universal to implement it but now it's a new angular ssr package which implements it much better.
TIMESTAMPS
0:00 Introduction
0:13 Angular 17 ssr in your project
1:43 What is changed?
4:34 Client hydration
6:29 Real example
9:29 Getting data from the backend
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Javascript interview questions - monsterlessons-academy.com/co...
► Angular Interview Questions monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
► Building real project with React Hooks - monsterlessons-academy.com/co...
► Building real project with Vue + Vuex - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...
beneficial. simple and clear.
Thank you!
Nice video and clear explanation! btw you can create a wrapper for the local storage and use it through a provider in your app, so you can check if storage available only once and set a fallback where it's not available ex. during SSR
That's a great idea!
Excelent idea, thank you !!!
Hi mate. Cool video of representing Angular SSR and it's perks. Here is a thing and suggestion what about to make a video which will show how to setup Angular 17 and NestJS in one codebase. Currently Angular 17 is typically using ExpressJS under the hood to serve backend. Waiting for new videos. Take care:)
Thank you for the idea. I will add it to the list
Nice and informative video
Thanks a lot
i would love to see a follow up video of changes in angular 17 ssr when used with firebase and how to deploy to firebase functions
I am overwhelmed with this new feature. Hope I can catch up.
Sure!
Thanks!
Thank you so much for your support. It means a lot to me!
This is a well structured video and it does a great job explaining how SSR works in Angular.
I think the RxJS part of the code should be improved to teach a better architecture. Subscribing to the data source and then setting a local component property in the callback isn’t declarative. In this case, the source observable is a HTTP request so it completes on its own, but if it’s a behavior subject or something like that, subscribing in this way without unsubscribing would cause memory leaks. To address both problems, don’t explicitly subscribe to the data stream at all. Instead set a local property equal to the source observable and subscribe in the template using the async pipe. That way, your property is completely declarative and the framework handles the subscription for you with the async pipe.
You are totally right but I already made lots of videos about async, unsubcribe, etc. This video is not about that.
@@MonsterlessonsAcademy that’s great. I’d recommend consistently using the async pipe to manage subscriptions. As a content creator myself, I’ve learned that people will see your explicit subscriptions here and run with that pattern without watching all of your videos. Just a suggestion. The format of the videos are great, your pacing is awesome, and I really like the way you progress through the material in a way that I think people will find easily digestible. Overall, great stuff!
agree@@kylerjohnson988
@@kylerjohnson988async pipe? .. nah bro that is so 2022
Not at all. That's the only angular native way to avoid explicit subscribes and have the framework manage the subscription for you. From a library perspective, rx-angular or ngrx has APIs that offer a better way to do this, but as it is the async pipe is the only angular native way@@LarsRyeJeppesen
Great video. Thanks
You forgot to mention this I guess.
"You should always explicitly specify a non-default phase, or you risk significant performance degradation."
Good point! I didn't see that in docs.
Wow, great video. Will benefit from this. Thanks!
One question, what kind of IDE or tool do you use, to navigate the file system in the code editor or terminal?
It's vim. I already made videos about it
th-cam.com/video/j6uqOvTRq6I/w-d-xo.html
th-cam.com/video/YrLiugDhCuk/w-d-xo.html
th-cam.com/video/Xa4aOOB7XZo/w-d-xo.html
Great video on SSR. Can you show us a simple demo for using GraphQL with Angular?
I will add it to the list of ideas for future videos.
Thank you so much for this illustration, we would like to see a video about how to deploy angular 17 Ssr project,
Struggling to deploy it on AWS amplify...
If the project without any routes it will be deployed as Ssr,
If it has routes, it will be only Spa, I hope this is a flaw in amplify not angular 😅
I will add your idea in the list of future videos
thank you for this video! I have a question please, what if I'm using firebase to fetch data instead of httpclient?
I didn't try that
Great Video! is it possible to get how to upgrade an existing angular project (v .12) using ssr to angular v. 17 ?
Yes but just with a lot of time and effort
It's comming for angular hope so
Yeap
You knock doors of un common imp topics. Can you make video on angular http client features when using apollo angular
I will add it to the list of ideas for future videos.
ng b doesnot build the project if we set up below configuration in project.json or angular.json file, Why??--->
"prerender": true,
"ssr": {
"entry": "server.ts"
}
How this will work with ngrx? Will the server be able to write and read of server-side ngrx state. If so, how to transfer this data to the client side ngrx state
I didn't try it with ngrx. Let me know if it works.
I appreciate the video.
Could you perhaps make a video explaining how to install the Angular 17 SSR app on Firebase?
I will add it to the list of ideas
@@MonsterlessonsAcademy Thanks for considering the idea! I actually found a way to implement Angular 17 SSR on Firebase. Your videos are always informative, and I look forward to seeing more content on your channel.
Sir I have a question other tutorials I saw there are different command for run the angular 17 app as server side rendering on local:4200 but you run the app with npm start which is actually ng serve and run the app as server side i also do this this works for me but there is any other ways to separate this like angular universals
I didn't look for this as I never needed such use case.
@@MonsterlessonsAcademy Sir, I have a confusion regarding Angular 17 SSR. After creating an Angular 17 SSR application, is it true that we cannot run the application in a simple mode and it can only be run in SSR mode? Additionally, how do we create builds for production and development environments?
Thanks for the video. I have a question about it. Can we use the Standalone Components with SSR, do you have any information about this?
Yes we can
@@MonsterlessonsAcademy Is there an example code that I can examine by removing App.module with SSR+Standalone?
Hey Hi. I have an issue with dynamic data rendering on the page. Can you please guide me on this, I can connect personally.
Unfortunately I don't do 1 on 1 consultations
So if we choose server side rendering, we need to wrap our localStorage, window, document codes in a wrapper to prove we are in a browser client. Good to know. I wonder do we still need to do it if we don't apply server side rendering? anyone knows?
Edit: I just created a new app with no ssr. Turns out you don't need a wrapper. Wrapper function are not defined anyway.
Why do you want to wrap it if you don't have server side rendering? you always have ls, window and document in browser.
you can use DOCUMENT token provided by angular that works on the server, as for localstorage I think you just need to add check if platform is browser or not by using isPlatformBrowser(inject(platformId)). and you only need those checks if you're accessing browser native apis at application startup
Hello Sir,
I want to start over my carrer in web development. Will it be a good choice if I choose angular over react for future?
Don't ask me. If you can find a lot of Angular jobs in your city then yes. If you find only React for example then no. You need to learn what is relevant for your city to find a job.
In my opinion, if there are fewer jobs with Angular, it means there are less developers available as well which results in a higher salary and less competition to get a job. Angular is more structured and mostly needless of 3rd party libraries while React is more wild and more dependent on the 3rd party libraries. There are videos comparing both. In my opinion, Google have had more successful Web applications than Facebook. These frameworks are being created after these products are built and delivered.
Thanks for the video.
How can we publish the project to nginx? I cannot find detailed explanation.
I will add it to the list of ideas for the next video.
@@MonsterlessonsAcademy thank you so much for reply to me, I solved the problem so I can help you if anyone want.
And there is no resources about publishing angular so I think much people need the video if you add
Thanks, very explicit. I wanted to migrate a very large project to SSR to gain speed on the first loading (the main.js file tends towards 3MB despite multiple optimizations). But I was faced with too many errors, particularly regarding cookies/storages and certain packages seem not to be compatible. I had to put that aside for now. It would be really great if you make a video on tips for migrating a CSR to SSR project.
Honestly migration video would be very useful
Unfortunately it depends on the project and it's dependencies a lot but I will keep this topic in mind.
@@MonsterlessonsAcademy Please still SSR case, Is there an equivalent of afterNextRender that I could use in services or guards that are functional or not ? For prevent undefined storage error
How can I run a component without ssr? For example, I need SSR only for the first page of the portal, for the others I don’t need it
You can't. What you can do is wrap some code in if(isPlatform) or afterNextRender()
does angular do streaming ssr like react via suspense?
No
why are you calling 2 times API with Angular 17 SSR?, can you explain howe to use only server side call api an show info on the cleint?. Thanks for your video very helpfully
I don't call the API twice. It is called on server and provides data on client and reuses it there
@@MonsterlessonsAcademy Sorry, it seems that I did not explain myself well, what I mean is that by placing only 1 call to the Angular 17 SSR API it makes 2 calls, one on the server side and one on the client side. And only when you call server side using "isPlatformBrowser(this.platformId)" it is not shown on the client. It's a problem I currently have.
How to tranfer raw request to angular component from server.ts
If by raw request you means database request then you can't. You can only use API request like you typically do.
How can we have a SSR for some routs and CSR for others ?
But why? Just do ssr everywhere.
Thanks for the video.
In minute 7:52 you can see an error (HttpErrorResponse) in the terminal. I also get this error. Have you found an explanation / solution for this error?
Yes http client doesn't use fetch API by default. As it is native way for node/browser it makes sense to add it
@@MonsterlessonsAcademy Here is an addendum from me:
withFetch() has already been added for me. However, I still had this error.
I changed the api url from localhost to 127.0.0.1 and the error is gone :)
Can you make a video on Angular 17 SSR with webpack plugins?
I will add it to the list of ideas for future videos
I have no other option than to accept SSR as they built it. I just have a question about sitemaps to search engines, how would that work for millions of pages setup on a single project? I'll have to find out by myself, but if you have a best practice way I'm open to suggestions
You build sitemap on backend. SSR doesn't help with that. You just need a route which collects your posts or anything that you want to add to sitemap and return an xml.
How do I use Nestjs out of the box and not just express?
Dunno, why? It's for rendering your angular SSR not to make API for your project. If you need NestJS for backend just do additional API for that.
Thanks for the video. A few questions:
1) Is there an equivalent to afterNextRender for server only? Like beforeNextRender?
2) When deploying an ssr site do we just do ng build? Universal had a long and convoluted build line
1. I don't think so
2. Yes but Angular building time was always super slow even without ssr
@@MonsterlessonsAcademynow it faster than React.
Hi mate. I appreciate what you're doing for the community; yet i do have a problem on following your material since your IDE is very Intimidating also you're so fast at the time of explanation.
Sir at list you may show how to setup or basic usages of your IDE of why don't you use common IDE like VS Code during your teaching time?! If you did for the benefit of community better to use commonly used Tools.
It might be that my pace or IDE is not for everybody. I'm not using vscode because during the time that I use Vim people switched between Sublime, Atom, Vscode and there will come something new again. It is not comfortable to me to jump between editors every time when it become popular.
It's not because of popularity its difficulty, or teach us. I thought you are looking to help the community. Those skilled one didn't come to TH-cam they do have luxury of finance. Consider the unfortunate community.
The point you mention also interesting you are evolving from programming language perspective Angular, React, Vue.. version by version, why don't IDE? You use English language because to address more community otherwise you may use your country language. So to address more community you should use commonly used tools. That's the right way to do. I thought people came to TH-cam to help the community not to show how they are smart. Being smart it's not being right. Changing one average developer life worth a lot than be cleaver.
@@esmaelmohamed8209 Why would the IDE matter? The code works the same and the whole video is about the code and not the IDE. What you are requesting is comparable to saying "Use the light theme and not the dark theme.", because both of these two things don't change how the code behaves.
Is it the same for angular 18?
Yes there are no changes regarding it in Angular 18
Добрый день) можно такой же ролик на нашем. Брал у Вас курс на Удеми по Angular и NgRx. Если запишете новый курс с учетом тех изменений которые поисходят с Angular(имею ввиду signals, ssr, ngif и т.д. ) заберу с руками. С уважением Ваш клиент.
Добрый день, русского контента и курсов больше не будет.
@@MonsterlessonsAcademy на українському теж було б гарно, все одно дякую що робите контент , сигнали вже знайшов у попередніх роликах) будемо вивчати англійску
Unfortunately ssr and i18n do not work without lots of workaround code
I believe that
first comment
I don't know why people use their comfortable tool instead of community commonly used tool once they appeared on public platform like TH-cam?!. Learning material it's not movie. This one is Just a movie for me which i don't know what he is doing which keyboard he is pressing... I only see how the gentleman is smart. Just a movie.
Well in 9 years I got less than 10 comments that people want me to change my editor in videos to vscode. 99.9% people are satisfied with my content and my courses. I don't see a reason to change anything if most of my students are satisfied.
@@MonsterlessonsAcademy Good luck Sir! You are always right. Let alone my suggestion my life doesn't worth for you, that what i know.
im still confused! 😕
Then you don't need SSR
Writing conditional logic for server/client is a terrible idea and an easy way to miss bugs. For example you typically navigate routes through the client so you'd never see server-side rendering issues that happen only during a hard refresh and most devs don't even know to check client routing and hard refreshes because its so new so it creates a lot of hidden bugs. Should generally keep server/client components separate so it's more predictable.
I don't agree on that as I don't see a point to create separate server or client components when SSR is done to execute any component on either side.
Ahh I see what you mean. And it is really annoying everytime I refresh the page. What I did is, I cover the layout with white bg (position : absolute; top; 0, bottom: 0; z-index .... width: 100%, opacity: 1 ) and then I create a function just to check if it is isPlatformBrowser, it will reflect the changes. Just use [class.opacity-0]="isBrowserLoaded()"
PHP I'm coming to visit (although we parted in the early 2000s). You've got server/client structure (although we kicked butt w/o that crap), you always got the job done, weren't fussy, were fun to work with and you never got in the way. We've got a lot of catching up to do!
twój ruski jest tak słaby ze nie idzie cie zrozumieć