Angular 17 SSR - Angular Server Side Rendering in a New Way

Подписаться 43 тыс.

Просмотров 29 тыс.

50% 1

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...

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

11 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 117

@pateldharmesh1361 7 месяцев назад

beneficial. simple and clear.

@MonsterlessonsAcademy 7 месяцев назад

Thank you!

@farrukh. 5 месяцев назад

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

@MonsterlessonsAcademy 5 месяцев назад

That's a great idea!

@AgustinCampon Месяц назад

Excelent idea, thank you !!!

@kirklimbu 23 дня назад

Nice and informative video

@MonsterlessonsAcademy 22 дня назад

Thanks a lot

@sasushi 7 месяцев назад

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?

@MonsterlessonsAcademy 7 месяцев назад

It's vim. I already made videos about it ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-j6uqOvTRq6I.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YrLiugDhCuk.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Xa4aOOB7XZo.html

@ymrlk 7 месяцев назад

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:)

@MonsterlessonsAcademy 7 месяцев назад

Thank you for the idea. I will add it to the list

@metalllus 7 месяцев назад

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

@sharongershoni 6 месяцев назад

Thanks!

@MonsterlessonsAcademy 6 месяцев назад

Thank you so much for your support. It means a lot to me!

@African_psycho 5 месяцев назад

Great Video! is it possible to get how to upgrade an existing angular project (v .12) using ssr to angular v. 17 ?

@MonsterlessonsAcademy 5 месяцев назад

Yes but just with a lot of time and effort

@yussefbens 7 месяцев назад

thank you for this video! I have a question please, what if I'm using firebase to fetch data instead of httpclient?

@MonsterlessonsAcademy 7 месяцев назад

I didn't try that

@kylerjohnson988 7 месяцев назад

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.

@MonsterlessonsAcademy 7 месяцев назад

You are totally right but I already made lots of videos about async, unsubcribe, etc. This video is not about that.

@kylerjohnson988 7 месяцев назад

@@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!

@JokeryEU 7 месяцев назад

agree@@kylerjohnson988

@LarsRyeJeppesen 7 месяцев назад

@@kylerjohnson988async pipe? .. nah bro that is so 2022

@kylerjohnson988 7 месяцев назад

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

@MrJeszam 7 месяцев назад

I am overwhelmed with this new feature. Hope I can catch up.

@MonsterlessonsAcademy 7 месяцев назад

Sure!

@onurismail 6 месяцев назад

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?

@MonsterlessonsAcademy 6 месяцев назад

Yes we can

@onurismail 6 месяцев назад

@@MonsterlessonsAcademy Is there an example code that I can examine by removing App.module with SSR+Standalone?

@AliHassan-sm1cv Месяц назад

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

@MonsterlessonsAcademy Месяц назад

I didn't look for this as I never needed such use case.

@AliHassan-sm1cv Месяц назад

@@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?

@theGoldyMan 7 месяцев назад

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

@MonsterlessonsAcademy 7 месяцев назад

I didn't try it with ngrx. Let me know if it works.

@monjurmorshed2854 6 месяцев назад

Great video on SSR. Can you show us a simple demo for using GraphQL with Angular?

@MonsterlessonsAcademy 6 месяцев назад

I will add it to the list of ideas for future videos.

@kirklimbu 22 дня назад

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" }

@aneeshb8087 7 месяцев назад

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?

@MonsterlessonsAcademy 7 месяцев назад

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.

@codeme8016 7 месяцев назад

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.

@chandh_the_moon9224 29 дней назад

Hey Hi. I have an issue with dynamic data rendering on the page. Can you please guide me on this, I can connect personally.

@MonsterlessonsAcademy 28 дней назад

Unfortunately I don't do 1 on 1 consultations

@codeandcloud 7 месяцев назад

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."

@MonsterlessonsAcademy 7 месяцев назад

Good point! I didn't see that in docs.

@ikbo 2 месяца назад

does angular do streaming ssr like react via suspense?

@MonsterlessonsAcademy 2 месяца назад

@korayozyurt2341 5 месяцев назад

Thanks for the video. How can we publish the project to nginx? I cannot find detailed explanation.

@MonsterlessonsAcademy 5 месяцев назад

I will add it to the list of ideas for the next video.

@korayozyurt2341 5 месяцев назад

@@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

@mypreciouz5634 7 месяцев назад

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.

@MonsterlessonsAcademy 7 месяцев назад

Why do you want to wrap it if you don't have server side rendering? you always have ls, window and document in browser.

@AlphaFrog1021 5 месяцев назад

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

@vladwolf444 6 месяцев назад

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

@MonsterlessonsAcademy 6 месяцев назад

You can't. What you can do is wrap some code in if(isPlatform) or afterNextRender()

@cngz7367 2 месяца назад

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?

@MonsterlessonsAcademy 2 месяца назад

Yes http client doesn't use fetch API by default. As it is native way for node/browser it makes sense to add it

@cngz7367 2 месяца назад

@@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 :)

@doubles6642 7 месяцев назад

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 😅

@MonsterlessonsAcademy 7 месяцев назад

I will add your idea in the list of future videos

@fastestnotes1046 5 месяцев назад

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

@MonsterlessonsAcademy 5 месяцев назад

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.

@02jaysenghani 4 месяца назад

I appreciate the video. Could you perhaps make a video explaining how to install the Angular 17 SSR app on Firebase?

@MonsterlessonsAcademy 4 месяца назад

I will add it to the list of ideas

@02jaysenghani 4 месяца назад

@@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.

@CodingAbroad 7 месяцев назад

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

@MonsterlessonsAcademy 7 месяцев назад

1. I don't think so 2. Yes but Angular building time was always super slow even without ssr

@Kirdaro 4 месяца назад

@@MonsterlessonsAcademynow it faster than React.

@chathurawewelwala4439 5 месяцев назад

How can we have a SSR for some routs and CSR for others ?

@MonsterlessonsAcademy 5 месяцев назад

But why? Just do ssr everywhere.

@wilsonmori949 3 месяца назад

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

@MonsterlessonsAcademy 3 месяца назад

I don't call the API twice. It is called on server and provides data on client and reuses it there

@wilsonmori949 3 месяца назад

@@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.

@farouktouil5036 7 месяцев назад

It's comming for angular hope so

@MonsterlessonsAcademy 7 месяцев назад

Yeap

@sfspmusic Месяц назад

Is it the same for angular 18?

@MonsterlessonsAcademy Месяц назад

Yes there are no changes regarding it in Angular 18

@MultiWarrr 7 месяцев назад

You knock doors of un common imp topics. Can you make video on angular http client features when using apollo angular

@MonsterlessonsAcademy 7 месяцев назад

I will add it to the list of ideas for future videos.

@user-ep2vn2wb5m 7 месяцев назад

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.

@stupidddd 7 месяцев назад

Honestly migration video would be very useful

@MonsterlessonsAcademy 7 месяцев назад

Unfortunately it depends on the project and it's dependencies a lot but I will keep this topic in mind.

@user-ep2vn2wb5m 7 месяцев назад

@@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

@ChetanSharma-jy8om 4 месяца назад

How to tranfer raw request to angular component from server.ts

@MonsterlessonsAcademy 4 месяца назад

If by raw request you means database request then you can't. You can only use API request like you typically do.

@obinnaezedei856 5 месяцев назад

How do I use Nestjs out of the box and not just express?

@MonsterlessonsAcademy 5 месяцев назад

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.

@andreil37 7 месяцев назад

Can you make a video on Angular 17 SSR with webpack plugins?

@MonsterlessonsAcademy 7 месяцев назад

I will add it to the list of ideas for future videos

@user-wh3mh6nf6g 7 месяцев назад

Добрый день) можно такой же ролик на нашем. Брал у Вас курс на Удеми по Angular и NgRx. Если запишете новый курс с учетом тех изменений которые поисходят с Angular(имею ввиду signals, ssr, ngif и т.д. ) заберу с руками. С уважением Ваш клиент.

@MonsterlessonsAcademy 7 месяцев назад

Добрый день, русского контента и курсов больше не будет.

@user-wh3mh6nf6g 7 месяцев назад

@@MonsterlessonsAcademy на українському теж було б гарно, все одно дякую що робите контент , сигнали вже знайшов у попередніх роликах) будемо вивчати англійску

@LarsRyeJeppesen 7 месяцев назад

Unfortunately ssr and i18n do not work without lots of workaround code

@MonsterlessonsAcademy 7 месяцев назад

I believe that

@esmaelmohamed8209 5 месяцев назад

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.

@MonsterlessonsAcademy 5 месяцев назад

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.

@esmaelmohamed8209 5 месяцев назад

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 RU-vid they do have luxury of finance. Consider the unfortunate community.

@esmaelmohamed8209 5 месяцев назад

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 RU-vid 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.

@Simon-yf7fo 5 месяцев назад

@@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.

@alifnaiech6972 7 месяцев назад

first comment

@l.e.nichols9382 4 месяца назад

im still confused! 😕

@MonsterlessonsAcademy 4 месяца назад

Then you don't need SSR

@esmaelmohamed8209 5 месяцев назад

I don't know why people use their comfortable tool instead of community commonly used tool once they appeared on public platform like RU-vid?!. 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.

@MonsterlessonsAcademy 5 месяцев назад

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.

@esmaelmohamed8209 5 месяцев назад

@@MonsterlessonsAcademy Good luck Sir! You are always right. Let alone my suggestion my life doesn't worth for you, that what i know.

@joshbedo8291 5 месяцев назад

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.

@MonsterlessonsAcademy 5 месяцев назад

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.

@MrJeszam 5 месяцев назад

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()"

@skaggaboom Месяц назад

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!