💥 Angular SSR Deep Dive (With Client HYDRATION)

[@AngularUniversity]

To learn more about Angular SSR, check out my Angular SSR In Depth Course - angular-university.io/course/angular-universal-course

[@ishraqsyed8999]

Beautifully explained. Probably the best Angular SSR explanation. Loved how the hydration is explained.

[@AngularUniversity]

Thank you so much. Stay tuned for more videos and Shorts!

[@pmsanthosh]

Finally the most awaited one

[@AngularUniversity]

Enjoy the video, and let me know what other content you would like to see here on the channel 🙂

[@veebxl]

Amazing thanks a million for this great showcase! 🎉

[@AngularUniversity]

Your're welcome, stay tuned for more videos on the channel. 😊

[@metric152]

This was just what I was looking for. I was concerned that ssr didn’t use the router. From some previous reading the hydration is a bit more manual but I’m sure that’s in your course.

[@AngularUniversity]

When the server receives a rendering request for a certain router path, it will generate the HTML for that specific page. So in that sense, the router is integrated with SSR.

[@omarabdelhameed1066]

Great topic 😁🔥

[@AngularUniversity]

Thank you, looking forward for the premier in 30 minutes 😊

[@VasanthaKrishnan-mb2sz]

Thank you so much , Your videos are always very helpful and very well explained 🙏

[@AngularUniversity]

Thank you. Stay tuned for more!

[@snehpaghdal]

How can i use localstorage of client, i mean i want to pass token in some of the pages for api call so what to do about that components ?

[@rohitvishwakarma3058]

great explanation

[@dhavalv]

Hello Vasco. There is a lesson in your video course in Angular University titled "Understanding In Detail the Angular Universal Express Server". Is this lesson relevant anymore ? It seems to be referring to an old setup

[@AngularUniversity]

I did update the walthrough on the Express service, please send me the link to the lesson so I double check 👍

[@m.1-n5c]

Hello, great video, but I hav one question about hidration , I clonned you ssr git repo , and when i build and run project , I see after initaial page client side http activate and gets data from server ,

[@rohitvishwakarma3058]

Can you please share your thoughts on *for a 3yr experienced SE in node.js and angular should he switch to Java ?*

[@dhavalv]

Vasco. Thanks for this wonderful video. I like the simplicity of your teaching. One question that I have is regarding client hydration. Does this feature only reduce the Http request on the client side, or it also contributes in some way by not redrawing the Dom. The state transfer ApI (although not needed as much), I feel will only ensure that the Http request is avoided. But is there more to the new Client Hydration than just preventing http requests being duplicated on client side

[@AngularUniversity]

Thank you, i's awesome to hear that. 😊 Indeed client hydration is all about not re-drawing the DOM all over again after startup. The application resumes from where it left off on the server, no need to re-render the whole component tree again after application bootstrap. 👍

[@DhirendraKumarS]

Can anyone explain how the secured api will be accessed using SSR?

[@rehansiddiqui2618]

Great tutorial, Thank you

[@AngularUniversity]

Thank you. Stay tuned for more videos!

[@ahmadrezamozaffary3434]

Thanks for your amazing course, but a question comes to my mind about how we can have SSR in angular if our backend is not express and it is maybe .Net 🤔

[@AngularUniversity]

Thank you, and that's a great question. Angular SSR is only available in Node, i.t wouldn't work in .Net 👍

[@bushbuddyplatypus]

Amazing video!

[@AngularUniversity]

Thank you. Stay tuned for more videos and shorts!

[@ikbo]

Is there a next.js equivalent in angular? Next makes it so much easier

[@AngularUniversity]

Yes, it's called Analog.js - analogjs.org/

[@muthiulhaqhaq3835]

Great tutorial, thank you Sir.

[@AngularUniversity]

You're welcome, I'm glad it helped ☺

[@alph_jvne]

Very helpfull! Thanks 👍

[@zetalivsanns5360]

Nisuuu .thx professor

[@AngularUniversity]

Welcome to the channel 😊

[@justzcross6236]

Still new to angular, does this mean i can customize what I want to show server side and client side? (That Would also Make my application cleaner) What about security configuration?

[@pateldharmesh1361]

Thanks for this amazing tutorial. but I am angular 17 and when I execute ng add @angular/ ssr, it executes well but does not get changes as you get in package.json. for dev and prod . Get only one "serve:ssr:myapp": "node dist/myapp/server/server.mjs" Any suggestions?

[@AngularUniversity]

Thank you 😊 The CLI command will give a development mode build, but the production deployment depends on your platform. the idea is to deploy the express server to a production environment.

[@pateldharmesh1361]

Thanks

[@weiliangsoon1693]

Hi, i got a question when testing on Angular SSR. in normal SSR application, when user choose some filters on page 1, showing list of data, then navigate to page 2, when navigate back using the browser back button, the filters will remain and as well as the list of data however using Angular SSR, the user filters are gone, is there any way to configure to achieve this behaviour?

[@hexantra]

Maybe you can use the query param?

[@AlalUddin24]

Dear Sir, I have already build a production based application and deployed browser folder on a server. and one thing I could see is that a component that is fetching data from api after deployed even api data or in database changes updated data not fetching. Please help

[@genyklemberg]

I think you should state your question better

[@AngularUniversity]

the HTTP request is not working? Check the chrome developer tools to see what could be going on. 👍

[@AlalUddin24]

@@AngularUniversity yes, Http request not getting hit. If I come through navigation then Http get (API) get hit and show updated data but if I refresh then only generated SSG output shows only

[@AngularUniversity]

@@AlalUddin24 that is normal that the HTTP request does not get triggered when you load the route via SSR, this is due to hydration. The server just loaded that data, so there is no need for the frontend to repeat the request upon startup. This sounds like normal SSR behavior with hydration.

[@AlalUddin24]

@@AngularUniversity. Ok . But let's say in database updated or basically modified data then API should get call for getting fresh data , right? but unfortunately not . This is only the issue I have been facing. 😥😟😟😥😥 . By the way Thank you so much for reply back.

[@sde1211]

Super thankful ❤

[@AngularUniversity]

Stay tuned for more videos!

[@oleksandrsmyrnov8295]

Thanks for the video! Just one question: I thought that apart from improving the rendering times, SSR also helps with SEO in a way that the crawler gets all the texts on the page. However as you inspect the page source after enabling SSR, there are NO texts I can see.. Am I mixing some things up? Why are the texts not there?

[@AngularUniversity]

The text should be there if SSR is on. In principle for search engines like Google, SSR is not needed since may years, it's real benefit is mostly user experience.

[@smyrnovoleksandr7429]

Thank you) Does it bring something to make static SSG without SSR?

[@manjeetdhimaan6133]

which IDE you are using?

[@nilbristi]

The deployment process is not clear. How the two different servers will communicate with each other to fetch the browser folder content?

[@AngularUniversity]

you can deploy everything to one single server and have the express server serve the files statically, or upload the bundles to something like AWS3 and separate frontend and backend completely

[@nilbristi]

@@AngularUniversity Can you upload a video to deploy an Angular ssr build file in any node server, AWS3 or Firebase. A AWS3 server example will be helpful. Actually I want setup a pipeline for this. My file is on Bitbucket.

[@genyklemberg]

What is the reason to deploy static files at CDN like S3? It takes additional remote requests. Or the reason that CDN like S3 handles files retrieval better than regular hosting storage?

[@AngularUniversity]

Yes correct, a CDN server static files like js and css way faster than the Express static middleware. 👍 But don't serve them straight from S3. You upload them from S3 and then serve them via Cloudfront, otherwise it's too slow. Maybe for some applications, serving the bundles via the Express server could be an option.

[@genyklemberg]

@@AngularUniversityRegarding express there is also an option to use Redis (it allows fast retrieval) for caching static files on server and cloudflare caching used for CDN

[@AngularUniversity]

@@genyklemberg That would work too, for sure 👍

[@BinaShah-z9k]

I'm using SSR with @rx-angular/isr, my issue is that I can see full cached version of my page in browser/cache with data get from firebase calls, but somehow when page is loading the call made again, which makes the UI part where the data is to be shown empty for some time. Which shows the data being called again on the client. Reply might be really helpful sir.

[@AngularUniversity]

This is the main problem that client hydration solves. without client hydration, you will see exactly that behavior. Turn on client hydration like explained in the video, and the issue will dissapear. 👍

[@AgustinCampon]

is the angular university course updated to angular 17 ? im interesed in the new ways of doing ssr !

[@AngularUniversity]

Yes the SSR In Depth course was updated to cover Angular 17 SSR and client hydration.

[@fronikuniu6214]

Hello great video, I have a question about how I can get information about language, I have tried to get it from header accept-language, but it seems to not working on angular 17 SSR. I need info about language before I render a website.

[@AngularUniversity]

Thank you 😊 I think you will have to extract in the Express route of the server using request.headers, and then inject it as config object in the Angular dependency injection system. did you try something like this, you will need a different import stackoverflow.com/questions/76220770/angular-ssr-get-request-instance-for-grabbing-headers-inside-a-route-resolver

[@fronikuniu6214]

@@AngularUniversity Yeah, I saw this thread, but I'm using angular 17 SSR and don't have `import {REQUEST} from "@nguniversal/express-engine/tokens";`

[@fronikuniu6214]

@@AngularUniversity Yeah, I saw this, but I'm using Angular 17 SSR and don't have access to import {REQUEST} from "@nguniversal/express-engine/tokens";

[@seydoudansogo6836]

thanks you for this video , I learned a lot of things about ssr . However I have some problem with images assets displaying , they don't display when I run the app on port 4000 using npm run serve:ssr , need help :( Thank you

[@AngularUniversity]

You're welcome, enjoy the videos 😊

[@nikunjguna7073]

In latest version there is no dev:ssr . Please tutorial for latest ssr

[@AngularUniversity]

This was recorded with Angular 17, it must be some confusion. dev:ssr is there

[@nikunjguna7073]

@@AngularUniversity for me using ng add @angular/ssr create files but in package.json there is no dev:ssr. there are just below options "ng": "ng", "start": "ng serve --port=4444 -o", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test", "serve:ssr:test-proj": "node dist/test-proj/server/server.mjs" using angular 17.0.0

[@richardsrodas.p495]

@AngularUniversity it could be that in version 17.1 they have removed it or it is only visible after the migration from angular universal to version 17.

[@AngularUniversity]

@@richardsrodas.p495 try npm start only, I thin it now starts it in SSR mode.

[@AliHassan-sm1cv]

Sir I have an question I follow same process but in my package.json and angular.json files there are no scripts for the run application on srr or simple mean when I install ssr package now i only able to run npm start and application is start running ssr mode. also same like for build only npm run build option is available other then this no commands works error missing command error. Could you please refer me why this happen when I create ne project

[@neerajpatel2647]

That's because with angular 18, the angular team has streamlined the process. Now you don't need to explicitly mention SSR, it will be used automatically when you do npm start and npm run build.

[@udit_batra]

In we can see the json response while viewing the source code. How can we hide the JSON response from the client. We want to hide the API response for security reasons. Please suggest. Thank you @angularUniversity in advance.

[@udit_batra]

Also, I want to hide the JSON in network calls as well.

[@AngularUniversity]

correct that's how the state gets transferred between the server and the client. The connect is over HTTPS, so the data is secure. There is no way to hide it from the body of the HTML page.

[@AngularUniversity]

This is not possible either, the call needs to be made over HTTPS, that's how security is achieved.

[@udit_batra]

@@AngularUniversity Thank you for your reply. Which other tech stack can I use as I want to hide the json. Please suggest.

[@AngularUniversity]

@@udit_batra There is no tech stack that allows you to do that, it's a fundamental misunderstanding of how web requests work. 👍

[@lakshmanmarimuthu1543]

Hi I'm created project Angular 11 universe SSR..it's all good but I had one issue when first page load it's double load..how to solve that problem..? Can you or Everyone help me..?

[@AngularUniversity]

You mean it's like the content is replaced again? This is because you don't have on client hydration yet, check out the SSR Deep dive video on my channel to see how to turn it on. 👍

[@kalyanking1080]

Lcp stands for largest contentfull paint not last content full paint

[@alexander.thalhammer]

Yeah exactly 🙂

[@JamesOfKS]

Hi you have great English but wanted to respectfully critique that you say "here" as an empty word very often to quite a distracting amount. The test is if you remove the word does it communicate the same thing and I did not hear any case where the word here was needed.

[@daretobedangerous6552]

It'd be more professional if there's no background music. It is really distracting.